graphql-codegen 使用手册

graphql-codegen

从GraphQL模式生成代码

使用简单的CLI从GraphQL模式和操作生成代码

立即生成代码

使用单个函数调用从GraphQL模式和GraphQL操作生成代码，而不考虑环境或代码格式。

轻松自定义

使用单个函数调用从GraphQL模式和GraphQL操作生成代码，而不考虑环境或代码格式

安装

# @graphql-codegen/cli
$ yarn add graphql @apollo/client
$ yarn add @graphql-codegen/cli -D
$ yarn add @graphql-codegen/import-types-preset @graphql-codegen/introspection -D
$ yarn add @graphql-codegen/typescript @graphql-codegen/typescript-document-nodes -D
$ yarn add @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo -D
$ yarn add @graphql-codegen/typescript-react-query -D

package.json

script:
"generator": "graphql-codegen --config operation.yml"

配置文件 operation.yml

hooks:
  # 格式化
  afterAllFileWrite:
    - prettier --write
overwrite: true
schema: 'http://127.0.0.1:8061/graphql'
documents: 'graphql/**/*.gql'
generates:
  # 基础类型
  src/generator/foundation.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
  # 操作
  src/generator/foundation.operation.ts:
    preset: import-types
    presetConfig:
      typesPath: ./foundation
      importTypesNamespace: SchemaTypes
    plugins:
      - 'typescript-react-apollo'
    config:
      # defaultBaseOptions: {
      #   fetchPolicy: 'cache-and-network'
      # }
  # src/generator/auth-center.operation.ts:
  #   plugins:
  #     - 'typescript-react-apollo'
config:
  immutableTypes: true