使用 graphql 代码生成器时如何将自定义标量类型映射到打字稿类型?
How to map a custom scalar type to a typescript type when using graphql code generator?
在后端定义了一个名为 Date
的自定义标量类型,它是一个 ISO 8601 字符串。
在前端“GraphQL 代码生成器”(https://www.graphql-code-generator.com/) 用于从模式生成打字稿类型。
codegen.yml
看起来像这样:
overwrite: true
schema: 'http://mybackenurl/graphql'
documents: 'src/**/*.graphql'
generates:
src/generated/graphql.ts:
config:
exposeQueryKeys: true
exposeFetcher: true
fetcher: '../GraphQLFetcher#fetcher'
scalars:
Date: Date
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-query'
这给出了类型,其中 graphql 模式中具有自定义标量类型 Date
的所有字段对应于生成的打字稿类型中的打字稿类型 Date
。但是在运行时它仍然是 string
。如果去掉配置中scalars下带Date: Date
的部分,则对应的type为Any
.
猜测我们需要指定某种映射器,它将我们从后端获得的 ISO 8601 字符串转换为打字稿 Date
,但我不明白这是如何做到的。
Codegen 不会为转换做任何事情,您可以输入 Date: number
,它会很乐意将其打印在您生成的文件中。它实际上只是一种为您的 API.
自动生成 Typescript 类型的方法
您正在寻找的是不同的,您基本上需要来自 graphql 客户端的“中间件”:
- 可以访问架构。因此,这意味着您需要轻松地将整个模式与前端应用程序一起发送,而大多数开发人员并不是特别适合私有 APIs.
- 可以解析所述模式以匹配 JSON 对标量的响应中的字段,然后将它们解释为您想要的任何本机类型(如
Date
)
对于Apollo客户端,可以使用https://github.com/eturino/apollo-link-scalars. For urql, I found https://github.com/clentfort/urql-custom-scalars-exchange。
在后端定义了一个名为 Date
的自定义标量类型,它是一个 ISO 8601 字符串。
在前端“GraphQL 代码生成器”(https://www.graphql-code-generator.com/) 用于从模式生成打字稿类型。
codegen.yml
看起来像这样:
overwrite: true
schema: 'http://mybackenurl/graphql'
documents: 'src/**/*.graphql'
generates:
src/generated/graphql.ts:
config:
exposeQueryKeys: true
exposeFetcher: true
fetcher: '../GraphQLFetcher#fetcher'
scalars:
Date: Date
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-query'
这给出了类型,其中 graphql 模式中具有自定义标量类型 Date
的所有字段对应于生成的打字稿类型中的打字稿类型 Date
。但是在运行时它仍然是 string
。如果去掉配置中scalars下带Date: Date
的部分,则对应的type为Any
.
猜测我们需要指定某种映射器,它将我们从后端获得的 ISO 8601 字符串转换为打字稿 Date
,但我不明白这是如何做到的。
Codegen 不会为转换做任何事情,您可以输入 Date: number
,它会很乐意将其打印在您生成的文件中。它实际上只是一种为您的 API.
您正在寻找的是不同的,您基本上需要来自 graphql 客户端的“中间件”:
- 可以访问架构。因此,这意味着您需要轻松地将整个模式与前端应用程序一起发送,而大多数开发人员并不是特别适合私有 APIs.
- 可以解析所述模式以匹配 JSON 对标量的响应中的字段,然后将它们解释为您想要的任何本机类型(如
Date
)
对于Apollo客户端,可以使用https://github.com/eturino/apollo-link-scalars. For urql, I found https://github.com/clentfort/urql-custom-scalars-exchange。