GraphQL 查询结果中的类型不存在属性答案

【问题标题】：Property does not exist on type in GraphQL query resultGraphQL 查询结果中的类型不存在属性
【发布时间】：2021-07-18 06:28:54
【问题描述】：

在 React 组件中，我使用 GraphQL 查询来获取数据：

const { data, error, loading } = useGetEmployeeQuery({
  variables: { id: "a34c0d11-f51d-4a9b-ac7fd-bfb7cbffa" }
});

关于数据解构

const { first_name } = data?.Employees_employees_by_pk;

类型检查返回错误

Property 'first_name' does not exist on type 'Maybe<{ __typename?: "Employees_employees" | undefined; } & Pick<Employees_Employees, "id" | "first_name" | "last_name" | "email" | "avatar" | "started_at" | "created_at" | "updated_at">> | undefined'

尝试将默认的"" 分配给first_name ，但这无助于消除错误。

类型是用graphql-codegen生成的：

export type GetEmployeeQuery = (
  { __typename?: 'query_root' }
  & { Employees_employees_by_pk?: Maybe<(
    { __typename?: 'Employees_employees' }
    & Pick<Employees_Employees, 'id' | 'first_name' | 'last_name' | 'email' | 'avatar' | 'started_at' | 'created_at' | 'updated_at'>
  )> }
);

如何让查询结果很好地解构？

【问题讨论】：

在调试器或控制台日志中检查数据时会发生什么？我认为 Maybe 泛型可以扩展 Array
收到的data 包含Employees_employees_by_pk 的对象以及所有预期的道具。
刚刚遇到同样的问题。关于这个问题的任何更新？

标签： typescript graphql graphql-codegen

【解决方案1】：

这段代码应该可以工作

if( data && data.Employees_employees_by_pk ) {
  // no undefined here
  // safe access to 'base type' fields
  const { first_name } = data.Employees_employees_by_pk;
  // use first_name
}

...它在逻辑上（和类型）不同于

const { first_name } = data?.Employees_employees_by_pk;
// possible access/destructure from undefined

【讨论】：

这对我有用，但我真的不喜欢这种语法，尤其是在处理嵌套值时。有谁知道更清洁的解决方案？