前言
公司中使用的是GraphQL接口，并且有相应的接口管理平台。工作中，调用接口的流程是：
- 在接口管理平台中找到对应的接口
- 将该接口的
schema复制到querier.graphql或mutations.graphql中 - 执行
yarn codegen，就会自动生成react hooks风格代码
通过这种方式调用graphql接口，笔者认为比较便捷且优雅。所以特意研究了这种方式，发现其核心是通过graphql-code-generator，生成react hooks风格的代码。
对比
1.通常调用方式
2.调用graphql-code-generator生成的hooks方式
可能有小伙伴好奇
'../generated/graphql.tsx'，这个文件是哪来的。其实这个就是graphql-code-generator自动生成的文件。
我们来看一下，生成的graphql.tsx中的部分代码：
可以发现，
hooks的调用方式之所以简洁，是因为需要定义的gql自动帮我们生成了，并且定义好了useAuthorQuery hook。还有也自动生成了Author type类型。
我们总结出使用graphql-code-generator的几个优点：
- 不需要定义
gql，代码更加简洁 - 直接使用
hooks方式，代码更加优雅 - 自动生成
Typescript类型，体验更加友好
实战
我们来看一下项目中如何使用graphql-code-generator。这里就以React为例，当然也支持Vue、Angular等项目。
1.安装graphql-code-generator命令行工具
yarn add graphql
yarn add -D @graphql-codegen/cli
2.安装生成hooks风格的plugins
这一步可以根据实际项目情况安装对应的plugins
yarn add @graphql-codegen/typescript-react-apollo
yarn add @graphql-codegen/typescript
yarn add @graphql-codegen/typescript-operations
3.编写项目中需要生成的接口
query
mutation
4.编写graphql-code-generator配置文件
overwrite - 生成代码时覆盖文件的标志（true默认情况下）
schema（必需） - 指向GraphQLSchema，可以通过本地文件路径、url等多种方式
documents - 指向你的GraphQL文档：query、 mutation、subscription、fragment
generates（必需） - 一个映射，其中键表示生成代码的输出路径，值表示该特定文件的一组相关选项：
generates.plugins（必需） - 生成文件时要使用的插件列表
5.配置package.json scripts
{
"scripts": {
"codegen": "graphql-codegen"
},
}
到这一步，配置基本上全部完成了。只需要执行yarn codegen，就会自动生成graphql代码
