如何从gql生成的typeDefs构建Codegen TypeScript类型？

错误原因 #

你遇到的问题是因为GraphQL Codegen默认无法直接解析通过gql模板标签编译生成的DocumentNode对象，它需要的是原始的GraphQL SDL（Schema Definition Language）字符串，或者能正确导出SDL的模块。

解决方案 #

方案一：抽离并导出原始SDL字符串（推荐） #

将你的GraphQL schema定义抽离为原始字符串，同时导出供Apollo使用的DocumentNode和供Codegen使用的SDL：

import { gql } from "apollo-server";
import { Allergens } from "@prisma/client";

// 生成枚举的原始SDL片段
const allergens = Object.values(Allergens).join(" ");

// 定义完整的原始SDL字符串并导出
export const typeDefsSDL = `
  enum Allergens {
    ${allergens}
  }

  type A { name: String }
`;

// 导出供Apollo Server使用的DocumentNode
export const typeDefs = gql(typeDefsSDL);

然后更新你的codegen配置文件，指定读取导出的SDL字符串：

schema: "./src/typeDefs.ts#typeDefsSDL"
generates:
  ./src/types.d.ts:
    config:
      useIndexSignature: true
    plugins:
      - typescript
      - typescript-resolvers
require:
  - tsconfig-paths/register

方案二：通过print函数转换DocumentNode为SDL #

如果你不想抽离原始SDL，可以使用graphql包的print函数，将已编译的DocumentNode转换回SDL字符串并导出：

import { gql, print } from "apollo-server";
import { Allergens } from "@prisma/client";

const allergens = Object.values(Allergens).join(" ");

// 编译生成DocumentNode
const typeDefs = gql`
  enum Allergens {
    ${allergens}
  }

  type A { name: String }
`;

// 转换为SDL字符串并导出
export const typeDefsSDL = print(typeDefs);

export default typeDefs;

同样在codegen配置中指向这个导出的SDL字符串即可，配置同方案一。

方案三：直接加载DocumentNode（需要额外依赖） #

如果你想直接读取导出的DocumentNode，可以安装@graphql-tools/load-files作为加载器，修改codegen配置：

1. 安装依赖：

npm install -D @graphql-tools/load-files

2. 更新codegen配置：

schema:
  - "./src/typeDefs.ts":
      loader: "@graphql-tools/load-files"
generates:
  ./src/types.d.ts:
    config:
      useIndexSignature: true
    plugins:
      - typescript
      - typescript-resolvers
require:
  - tsconfig-paths/register

这种方式会让Codegen直接加载并解析导出的DocumentNode对象，无需额外导出SDL字符串。

内容的提问来源于stack exchange，提问作者Stretch0