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"
}