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

Question

I need to access only the "departments" type in this large type generated from 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'>
        )>>> }
      )>>> }
    )>>> }
  )> }
);

I cannot find a way around this. Pick<GetCompanyChartQuery, 'subType'> or GetCompanyChartQuery['subtype'] wont do the trick here.

I am trying to fetch data with a GraphQL query and put the response in a state like this:

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

setDepartments(data?.generateOrgChart?.departments);

But to do this I need the correct type.

Thanks in advance.

Answer 1

I think the issue with picking the subtypes is the optional properties. If you make the object non-nullish, TypeScript can pick out the subtype.

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