自动生成GraphQL接口文件的步骤

1、安装CLI

$ yarn add -D graphql @graphql-codegen/cli

2、初始化

$ graphql-codegen init

gql文件示例

// backend-id-options.gql

query getBackendIdOptions($content: String, $backendIds: [Int!]) {
  backendIdOptions(content: $content, backendIds: $backendIds) {
    name
    sellerPhone
    accountType
    id
    disabled
  }
}

 

// current-user.gql

query CurrentUser {
  currentUser {
    role
    liveRoom {
      id
      name
    }
  }
}

 

 初始化命令执行后会在根目录下生成 codegen.yml，这个文件可以根据 graphql 的接口自动生成调用方法，生成文件在 libs/xxx/graphql/documents.ts（这个地址是你自己项目里配置的地址），然后直接引用里面的方法来调接口

// codegen.yml

overwrite: true
schema: "http://localhost:3333/xxx-api/graphql"
documents: "libs/xxx/graphql/**/*.{gql,graphql}"
generates:
  libs/xxx/graphql/documents.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"

注意：接口地址必须指定正确，否则执行命令会报错

 3、执行生成命令

// package.json

"scripts": {
    "generate": "graphql-codegen --config codegen.yml"
}