访问从 GraphQL 生成的多个嵌套 TypeScript 类型答案

【问题标题】：Access multiple nested TypeScript type generated from GraphQL访问从 GraphQL 生成的多个嵌套 TypeScript 类型
【发布时间】：2021-08-22 13:54:42
【问题描述】：

我只需要访问从 GraphQL 生成的这个大类型中的“部门”类型：

export type GetCompanyChartQuery = (
  { __typename?: 'Query' }
  & { generateOrgChart?: Maybe<(
    { __typename?: 'DepartmentNode' }
    & Pick<DepartmentNode, 'name'>
    & { manager?: Maybe<(
      { __typename?: 'EmployeeNode' }
      & Pick<EmployeeNode, 'name' | 'mobilePhone'>
    )>, departments?: Maybe<Array<Maybe<(
      { __typename?: 'DepartmentNode' }
      & Pick<DepartmentNode, 'name' | 'depth'>
      & { manager?: Maybe<(
        { __typename?: 'EmployeeNode' }
        & Pick<EmployeeNode, 'name'>
      )>, employees?: Maybe<Array<Maybe<(
        { __typename?: 'EmployeeNode' }
        & Pick<EmployeeNode, 'imageUrl' | 'mobilePhone' | 'name' | 'position' | 'title' | 'depth'>
      )>>>, departments?: Maybe<Array<Maybe<(
        { __typename?: 'DepartmentNode' }
        & Pick<DepartmentNode, 'name' | 'depth'>
        & { manager?: Maybe<(
          { __typename?: 'EmployeeNode' }
          & Pick<EmployeeNode, 'name'>
        )>, employees?: Maybe<Array<Maybe<(
          { __typename?: 'EmployeeNode' }
          & Pick<EmployeeNode, 'imageUrl' | 'mobilePhone' | 'name' | 'position' | 'title' | 'depth'>
        )>>> }
      )>>> }
    )>>> }
  )> }
);

我找不到解决方法。 Pick 或 GetCompanyChartQuery['subtype'] 在这里不起作用。

我正在尝试使用 GraphQL 查询获取数据并将响应置于如下状态：

const [departments, setDepartments] = useState<TheTypeINeedToAccess>();

setDepartments(data?.generateOrgChart?.departments);

但要做到这一点，我需要正确的类型。

提前致谢。

【问题讨论】：

标签： reactjs typescript types graphql react-query

【解决方案1】：

我认为选择子类型的问题在于可选属性。如果你使对象不为空，TypeScript 可以挑选出子类型。

type Departments = Required<GetCompanyChartQuery>["generateOrgChart"]["departments"]

【讨论】：