从GraphQL架构生成的Typescript类型重写

Question

我正在使用graphql-code-generator从我的GraphQL模式中生成typescript类型。在GraphQL中，您可以创建自定义标量类型，这将生成以下类型：/graphql.ts

export type Scalars = {
  String: string;
  Boolean: boolean;
  NodeDescription: any;
};

export type CodeResource = {
  ast: Scalars["NodeDescription"];
};

正如您所看到的，GraphQL默认的标量类型，如字符串、布尔值等将映射到等效的Typescript类型上。像NodeDescription这样的自定义标量类型将得到typescript类型any。

在我的Angular客户机中，已经有一个NodeDescription类型(在../app/shared/syntaxtree中)，我想使用它来代替生成的any类型。有没有办法覆盖标量类型中的NodeDescription字段？所以最后，我希望生成的CodeResource类型的ast字段的类型是NodeDescription，而不是any。

我的第一个想法是用NodeDescription覆盖Scalars["NodeDescription"]类型。因此，我尝试在一个新文件中导入所有类型并覆盖它们，如下所示：/types.ts

import {Scalars} from "./graphql";
import {NodeDescription} from "../app/shared/syntaxtree";
type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
type Scalar = Overwrite<Scalars, {NodeDescription: NodeDescription}>

这实际上是有效的，但是CodeResource类型的ast字段仍然是any类型。

另一个想法是使用带有深思熟虑的sed命令的bash脚本，这样生成的文件将被编辑如下：

import {NodeDescription} from "../app/shared/syntaxtree";
export type Scalars = {
  String: string;
  Boolean: boolean;
  NodeDescription: NodeDescription;
};

然而，在我实现这种方法之前，我想知道是否有一种智能的typescript方法来覆盖生成的类型。谢谢你的帮助。

Answer 1

如果您在使用graphql-code-generator时遇到同样的问题，我找到了一个具体的解决方案。有一个叫做add的插件。因此，在codegen.yml中，您可以添加导入并处理自定义标量类型。我的codegen.yml现在看起来像这样：

overwrite: true
schema: "../schema/graphql/schema.json"
documents: "../schema/graphql/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
      - add:
          content: 'import { NodeDescription } from "../app/shared/syntaxtree";'
    config:
      enumsAsTypes: true
      scalars:
        NodeDescription: NodeDescription
        ISO8601DateTime: string