使用 graphql 代码生成器时如何将自定义标量类型映射到打字稿类型?

Dav*_*erg 9 typescript graphql graphql-codegen

名为的自定义标量类型Date后端定义了

在前端“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'
Run Code Online (Sandbox Code Playgroud)

这给出了其中 graphql 模式中具有自定义标量类型的所有字段Date对应于Date生成的打字稿类型中的打字稿类型的类型。然而在运行时它仍然是一个string. Date: Date如果去掉配置中标量不足的部分,则对应的类型为Any,则对应的类型为。

猜测是我们需要指定某种映射器,它将我们从后端获得的 ISO 8601 字符串转换为 typescript Date,但我不明白这是如何做到的。

小智 5

Codegen 不会执行任何转换操作,您可以将Date: number其放入生成的文件中,它会很乐意将其打印出来。它实际上只是为 API 自动生成 Typescript 类型的一种方法。

您正在寻找的东西是不同的,您基本上需要来自 graphql 客户端的“中间件”:

  1. 有权访问架构。因此,这意味着您需要轻松地将整个架构与前端应用程序一起交付,而大多数开发人员并不特别适合私有 API。
  2. 可以解析所述模式以匹配 JSON 响应中的标量字段,然后将它们解释为您想要的任何本机类型(例如Date)

对于 Apollo 客户端,您可以使用https://github.com/eturino/apollo-link-scalars。对于urql,我找到了https://github.com/clentfort/urql-custom-scalars-exchange。