GraphQL 是一种用于 API 的查询语言和运行时环境。它可以让客户端明确地指定其数据需求，并且只返回所需的数据。GraphQL 通过一种类型系统来定义 API 中的数据，并提供了一种强类型、灵活、易于扩展的方式来查询数据。然而，手写 GraphQL 客户端代码是一项繁琐的工作，特别是在大型应用程序中。因此，我们可以使用代码生成器来生成客户端代码，以避免手写代码的繁琐。
在本文中，我们将介绍如何使用 GraphQL 代码生成器从 GraphQL 模式生成客户端代码。我们将使用 graphql-code-generator 库来生成客户端代码。该库支持多种语言和模板，并且可以根据我们的需求来生成客户端代码。
安装
首先，我们需要安装 graphql-code-generator：
npm install -g graphql-code-generator
配置
接下来，我们需要创建一个配置文件 codegen.yml，并在其中定义我们的 GraphQL 模式和生成代码的选项。
模式
我们需要指定我们的 GraphQL 模式的位置。这可以是一个 URL，也可以是一个本地文件。例如：
schema: http://localhost:4000/graphql
或者：
schema: ./schema.graphql
生成器
我们需要选择我们要使用的生成器。graphql-code-generator 支持多种生成器，例如 TypeScript、Flow、React Apollo 等。我们可以在配置文件中指定我们要使用的生成器。例如：
generates:
./generated.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-apollo此处我们选择了 TypeScript、TypeScript 操作和 TypeScript React Apollo 生成器。
选项
我们还可以指定其他选项，例如我们要生成的查询、变量和操作类型。例如：
-- -------------------- ---- -------
----------
---------------
--------
- ----------
- ---------------------
- -----------------------
-------
---------- ----
-------- -----
-------------- -----
--------------- ----
-------------- ----
--------------- ----
------------------------ ----
----------------------- ----
---------------------------- ----
----------------- ----
---------------------- ----
--------------------- ----
-------------------------- ----此处我们选择了使用钩子函数、变异函数和重新获取函数，以及生成查询构建器和操作选项函数。
生成代码
在我们完成了配置文件后，我们可以使用以下命令来生成客户端代码：
graphql-codegen
生成的代码将会被保存在我们在配置文件中指定的目录中。
示例
以下是一个示例配置文件，它生成一个 TypeScript React Apollo 客户端，并使用钩子函数和变异函数：
-- -------------------- ---- -------
------- -----------------------------
----------
---------------
--------
- ----------
- ---------------------
- -----------------------
-------
---------- ----
-------- -----
-------------- -----
--------------- ----
-------------- ----
--------------- ----
------------------------ ----
----------------------- ----
---------------------------- ----
----------------- ----
---------------------- ----
--------------------- ----
-------------------------- ----结论
使用 GraphQL 代码生成器可以避免手写客户端代码的繁琐。我们可以使用 graphql-code-generator 库来生成客户端代码，它支持多种语言和模板，并且可以根据我们的需求来生成客户端代码。在配置文件中，我们可以指定我们的 GraphQL 模式和生成代码的选项。最后，我们可以使用 graphql-codegen 命令来生成客户端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746bca5e504cb428ec1a1a3