GraphQL 是一种面向 API 的查询语言，它提供了强类型、可预测、客户端驱动的数据查询方式。在前端开发中，使用 GraphQL 可以解决很多与后端数据交互相关的繁琐问题，例如数据规范化、查询复杂度控制等。然而，手写 GraphQL 查询和响应类型定义工作量较大，难以维护和修改。因此，本文将介绍如何使用自动生成工具生成 GraphQL 代码，并实现类型检查。
代码生成工具的选择
代码生成工具可以根据 GraphQL 的 schema 自动生成查询类型、响应类型、查询函数等代码。在市面上存在许多代码生成工具，其中比较常用的有：
- Apollo GraphQL Codegen: Apollo 官方出品的代码生成器，支持多种语言、多种生成方式，且支持通过插件扩展功能。
- GraphQL Code Generator: 支持 16 种语言，集成了多种插件，例如自动生成 TypeScript 类型、自动生成 React Hooks 等。
除了以上两种，还有其他一些工具，例如 graphql-schema-typescript、gql-codegen等，这里不再一一介绍。根据实际情况选择适合自己的工具即可。
Apollo Codegen 的使用
1. 安装
需要先安装 apollo 工具链：
npm install -g apollo
然后在项目中安装必要的依赖：
npm install --save-dev @apollo/client graphql npm install --save-dev @apollo/codegen
2. 配置
在项目根目录下创建 codegen.yml 文件，填写如下配置：
schema: http://localhost:4000/graphql
documents: "src/**/*.graphql"
generates:
src/generated/types.ts:
plugins:
- typescript
- typescript-operations其中，schema 属性填写后端 GraphQL 服务的 url，documents 属性填写包含 GraphQL 查询和变量定义的 .graphql 文件路径。generates 属性则是生成代码的配置项，配置文件名和生成插件可自行调整。
生成的 types.ts 文件会包含后端服务的类型定义和自动生成的查询函数，例如：
-- -------------------- ---- -------
------ ---- ------------- - -
------------ --------
------- ------
------------- ------------ ------- --- ------- ------- -------------- ------ ------------- ---
--
--
------ ---- ---------------------- - ------- ----- -------- ----- ---
------ ---- ------------- - -
------------ --------
------- ------
------
------- ------------ ------- --- ------- ------ -------------- ------- ------------- --
-
--
--
------ ----- ---------------- - ----
----- -------- -
----- -
--
-----
----
-
-
--
------ -------- -----------------
------------- -------------------------------------- -----------------------
- -
------ ------------------------------ ----------------------------------------- -------------
-3. 使用
在页面中使用自动生成的查询函数：
-- -------------------- ---- -------
------ - ----------------- ------------- - ---- ------------------
-------- ---------- -
----- - -------- ------ ---- - - -------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ------------------ --- ------ ---- -- -- -
---- ---------
----------------
-------------
------
---
-由于自动生成的 queries 是根据 schema 自动生成，并且使用 TypeScript 静态类型语言，因此调用时会实现类型检查。若请求的数据与后端返回的数据类型不匹配，开发工具会在编译时提示错误。
GraphQL Code Generator 的使用
1. 安装
首先，需要安装代码生成器本身：
npm install --save-dev @graphql-codegen/cli
然后，需要根据实际情况选择需要使用的插件。以 TypeScript 为例，需要安装以下插件：
npm install --save-dev @graphql-codegen/typescript npm install --save-dev @graphql-codegen/typescript-operations npm install --save-dev graphql-tag # 如果使用 `.graphql` 文件，则需要安装该插件
2. 配置
在项目中创建 codegen.yml 文件，填写下面的内容：
-- -------------------- ---- -------
------- -----------------------------
---------- ------------------
----------
-------------------------
--------
- ------------
- -----------------------
- -------------------------
-------
---------- ----
-------------- -----
-------- -----其中，schema 属性填写后端 GraphQL 服务的 url，documents 属性填写包含 GraphQL 查询和变量定义的 .graphql 文件路径。generated 属性则是生成代码的配置项，配置文件名和插件可自行调整。如果使用了 .graphql 文件则需增加对应的插件，并以 .graphql 作为文件名后缀。
类型定义和查询函数会被生成到 src/generated/graphql.ts 文件，包括以下内容：
-- -------------------- ---- -------
------ ---- ---------------------- - ------------- ----- -------- ----- ---
------ ---- ------------- - - ------------ ------- - - -
------- ------------
------------------- ------------ ------ - - ---------------- ---- - ------- - ---------
--
--
------ ----- ---------------- - ----
----- -------- -
----- -
--
-----
----
-
-
--
------ -------- -----------------
------------- -------------------------------------- -----------------------
- -
------ ------------------------------ ----------------------------------------- -------------
-3. 使用
-- -------------------- ---- -------
------ - ----------------- ------------- - ---- --------------------
-------- ---------- -
----- - -------- ------ ---- - - -------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ------------------- --- ------ ---- -- -- -
---- ---------
----------------
-------------
------
---
-generated/graphql 文件包含了自动生成的 types 和 queries/mutations。与 Apollo Codegen 类似，GraphQL Code Generator 生成的代码仍然可以实现类型检查。
总结
本文介绍了使用 GraphQL 代码生成工具自动生成代码并实现类型检查的方法。在编写前端代码时，避免了使用魔法字符串操作，使得代码更易维护、更加清晰易懂，并能有效避免人为错误。根据实际情况，选择 Apollo Codegen、GraphQL Codegen 等工具达到代码自动生成的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c26a9b83d39b488166b820