Typescript 和 Graphql 片段

Question

我使用 codegen 生成 TS 类型，并使用 Apollo 客户端向服务器发送查询。

当我为以下示例生成代码时，Typescript 不知道

people

有

firstName

和

lastName

字段，它只知道

avatar

字段存在。如果我删除片段并直接移动字段来查询所有字段都可用。

我应该怎样做才能正确支持片段？

片段/person.graphql

fragment NameParts on Person {
  firstName
  lastName
}

查询/person.ts

import { graphql } from '@/gql'

export const getPersonDocument = graphql(`
   query GetPerson {
     people(id: "7") {
       ...NameParts
       avatar(size: LARGE)
     }
   }
`)

'@/gql'

是codegen的输出目录

Answer 1

您需要导入（并使用）定义查询的文件中的片段

queries/person.ts

：

import { graphql } from '@/gql'
import personFragment from 'fragments/person.graphql'

export const getPersonDocument = graphql(`
   ${personFragment}

   query GetPerson {
     people(id: "7") {
       ...NameParts
       avatar(size: LARGE)
     }
   }
`)