reactjs - 使用 @graphql-codegen/cli 获取 graphql 查询中的子类型

Question

我有一个以下查询

export const GET_ALL_ADVERT_CUSTOM_FIELD = gql(`
  query advertCustomFields {
    advertCustomFields {
      nodes {
        slug
        valueType
        displayName
        description
        canRead
      }
    }
  }
`)

我想过滤这样的节点列表

import { Props as SelectProps } from 'react-select'
import React, { FC, useState } from 'react'
import ObjectSelector from 'components/Common/ObjectSelector'
import OptionWithDescription from './OptionWithDescription'
import { useQuery } from '@apollo/client'
import { AdvertCustomFieldsDocument } from '__generated__/graphql'

export const AdvertCustomFieldSelector: FC<SelectProps> = (props) => {
  const [data, setData] = useState<NodeType[]>()
  useQuery(AdvertCustomFieldsDocument, {
    onCompleted: (res) => {
      const filterData = res.advertCustomFields?.nodes?.filter((e) => e.canRead)
      setData(filterData)
    },
  })

  return (
    <ObjectSelector<Node>
      name={props.name}
      onChange={props.onChange}
      options={data as any}
      getOptionLabel={(option) => option?.displayName as string}
      getOptionValue={(option) => `${option.slug}`}
      components={{ Option: OptionWithDescription }}
    />
  )
}

问题是 @graphql-codegen/cli 不会导出 NodeType 的类型。

这是我的代码生成配置

import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: './app/graphql/schema.graphql',
  documents: ['./facerberus/components/**/*.ts'],
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    './facerberus/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql',
      },
    },
  },
}

export default config

哪个配置使codegen导出NodeType类型或如何通过ts实现它

Answer 1

Codegen 不会为操作的每个部分生成独立类型。 但您可以轻松地从操作类型中提取所需的部分。应该是这样的: type NodeType = AdvertCustomFieldsQuery['advertCustomFields']['nodes'][number]