GraphQL Code Generator 是一个工具，可以根据 GraphQL 的 Schema 自动生成 TypeScript 的类型定义

2 年 ago

科, 雅

2 minutes

以下是对于 TypeScript × GraphQL 开发中必不可少的图形代码生成器的介绍。

什么是GraphQL Codegen？

这是一个用于根据GraphQL的端点和GraphQL的模式定义来生成TypeScript类型定义的CLI工具。
而且，通过使用插件，它不仅可以生成TypeScript的类型定义，还可以生成Apollo客户端代码、TypeScript的解析器以及Java的解析器等各种内容。

生成的示例包括：

一个例子是生成物。

…などなど

设置

请在项目目录中执行以下操作。

npx graphql-codegen init

根据init时的选择内容，会生成codegen.yml文件。

最小的配置文件如下所示。 de .)

schema: エンドポイントのURL、schemaファイルパス
generates:
  生成したいファイルパス
    plugins:
      使用するプラグイン

生成 TypeScript 的类型定义

首先，生成TypeScript类型定义从基本的GraphQL模式。请将codegen.yaml配置如下：

schema: "https://example.com/v1/graphql"
generates:
  ./src/@types/types.d.ts:
    plugins:
      - typescript

当在进行cli配置时，执行指定的npm脚本后，应会在./src/@types目录下生成types.d.ts。

# init時に設定したnpmスクリプト名で実行
yarn codegen

生成操作的类型定义

除了从schema自动生成的类型之外，还可以根据在产品中使用的查询和变更操作创建相应的类型。
通过添加@graphql-codegen/typescript-operations，并修改codegen.yml文件如下。

yarn add -D @graphql-codegen/typescript-operations

  schema: "https://example.com/v1/graphql"
+ documents: src/graphql/**/*.ts
  generates:
    ./src/@types/types.d.ts:
      plugins:
        - typescript
+       - typescript-operations

在当前状态下执行yarn codegen，可以生成以下操作（Mutation）的目标：

export const ADD_PRODUCT = gql`
    mutation AddProduct($name: String!) {
        insert_products(objects: { name: $name }) {
            returning {
                id
                name
                created_at
            }
        }
    }
  `

Mutation的返回值和参数类型是自动生成的。你可以直接在使用apollo客户端时指定类型并使用！

export type AddProductMutationVariables = {
  name: Scalars['String'];
};

export type AddProductMutation = (
  { __typename?: 'mutation_root' }
  & { insert_products?: Maybe<(
    { __typename?: 'products_mutation_response' }
    & { returning: Array<(
      { __typename?: 'products' }
      & Pick<Products, 'id' | 'name' | 'created_at'>
    )> }
  )> }
);

生成schema.graphql

如果您正在使用像HASURA这样的GraphQL引擎，并且没有schema.graphql文件，那么您也可以生成它。

yarn add -D @graphql-codegen/schema-ast

  schema: "https://example.com/v1/graphql"
  documents: src/graphql/**/*.ts
  generates:
    ./src/@types/types.d.ts:
      plugins:
        - typescript
        - typescript-operations
+   ./schema.graphql:
+     plugins:
+       - schema-ast

在这个状态下运行yarn codegen，将在项目根目录下生成./schema.graphql文件。

有了`schema.graphql`文件后，可以在IntelliJ的JS-GraphQL插件等工具中实现代码自动补全，非常方便。

在介绍中提到，JS-GraphQL是一款在使用IntelliJ编写GraphQL时非常方便的插件。

结束

用graphql codegen与GraphQL和TypeScript结合使用能够显著改善开发体验哦~