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

Posted 2023-03-08

【中文标题】使用graphql代码生成器时如何将自定义标量类型映射到打字稿类型？

【英文标题】：How to map a custom scalar type to a typescript type when using graphql code generator?

【发布时间】：2021-11-23 06:05:33

【问题描述】：

在后端定义了一个名为 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。如果去掉配置中标量下Date: Date的部分，则对应的类型为Any。

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

【参考方案1】：

Codegen 不做任何转换，您可以输入Date: number，它会很乐意将其打印到您生成的文件中。它实际上只是一种为您的 API 自动生成 Typescript 类型的方法。

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

有权访问架构。因此，这意味着您需要能够轻松地将整个架构与您的前端应用程序一起交付，而大多数开发人员并不是专门针对私有 API 的。 可以解析所述架构以将 JSON 响应中的字段匹配到标量，然后将它们解释为您想要的任何本机类型（例如 Date）

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

【讨论】：

我认为这是解析器可以做的，但我可能错了？ graphql-code-generator.com/docs/plugins/typescript-resolvers

解析器在后端而不是前端，您不能通过网络传输Date。最终一切都是 JSON。