GraphQL 是一个新兴的 API 查询语言，它的出现彻底革新了 Web 开发中的 API 领域。使用 GraphQL，开发者可以将请求所需的数据与返回的数据一一对应，最大化地减少了数据冗余，从而提高了 Web 应用的效率。GraphQL 还提供了一些有用的工具，例如生成客户端代码，以更容易地构建和维护你的应用程序。
生成客户端代码的好处
生成客户端代码可以为开发者节省很多时间和精力。它减少了手写一些代码的需要，如数据类型、API 端点以及一些请求等。这样你就可以专注于编写归纳和处理数据的业务逻辑代码，而不必担心繁琐的 API 调用和数据类型处理的问题。
另外，生成客户端代码还有以下优点：
- 易于维护：生成的代码是模板生成的，因此所有客户端代码都具有一致性，并且更容易维护。
- 错误更少：由于自动生成的代码采用的是模板生成方式，因此它们更容易遵守最佳实践和规范，从而减少了人为错误的数量。
- 提高效率：通过使用生成客户端代码，开发者可以减少需要编写的代码行数，从而更快地构建 Web 应用程序。
- 更快速的开发周期：生成客户端代码让开发者能够更快地开始编写代码。这意味着开发周期会更短，从而可以更快地将产品推向市场。
JavaScript 中的 GraphQL 代码生成工具
有很多库和工具可以帮助你生成客户端代码。下面我们将着眼于一些流行的库和工具：
1. graphql-codegen
graphql-codegen 是一个用于生成各种类型的代码的插件化工具。它可以生成使用 GraphQL 的 Typescript、React、Angular、Vue、MongoDB、Apollo、Stitch 和其他库的代码。你可以轻松地使用 graphql-codegen 自定义自己的代码生成器，以便生成特定类型的代码。
// 安装 graphql-codegen npm install -g graphql-codegen // 安装插件以生成代码 npm install @graphql-codegen/typescript @graphql-codegen/typescript-operations // 生成代码 graphql-codegen --config codegen.yml
其中，codegen.yml 配置文件内容如下：
-- -------------------- ---- -------
---------- ----
------- --------------------- - ---- ------ ---
---------- -------------------- - ---- ---------------------------
----------
--------------------------
--------
- ---- --- -- --- ---- ---- ----- -- --- ------------- --------- -- ------------------- - --- ------- -- --- --- -- --- ----
- ----------
- ---------------------2. gql-gen
gql-gen 是一个另一个可用于生成客户端代码的工具。它也可以生成 Typescript 代码，还可以生成其他语言的代码，例如 Java 和 C#。
通过使用以下步骤，你可以安装并使用 gql-gen：
// 安装 gql-gen npm install -g gql-gen // 安装依赖 npm install graphql graphql-tag apollo-utilities --save-dev // 生成代码 gql-gen --config gql-gen.yml
其中，gql-gen.yml 配置文件内容如下：
template: - typescript schema: http://localhost:4000 # your schema url documents: src/**/*.graphql # your queries/mutations/fragments target: src/generated/graphql.tsx # output file
使用案例
假设你的应用程序有一个仓库（Repository）对象和一个查询操作，以检索仓库数据。通过使用 GraphQL 和生成的客户端代码来实现这个查询操作，代码如下所示：
query getRepository($id: Int!){
repository(id: $id) {
id
name
description
createdAt
}
}-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------------------
------ - --- - ---- ---------------
----- -------------- - ----
----- ------------------ ----- -
-------------- ---- -
--
----
-----------
---------
-
-
--
-------- ------------ -- -- -
----- - -------- ----- ----- - - ------------------------ -
---------- - -- --
---
-- --------- ------ ------------------
-- ------- ------ --------- --------------------
------ -
-----
-------------------------------
------------------------------------
----------- -------------------------------
------
--
-
------ ------- -----------在上面的代码示例中，useQuery 钩子函数来从 API 获取数据，variables 属性包含参数。GraphQL 查询是在 gql 模板标记内声明的，这个标记可以用来将查询操作嵌入到 JavaScript 中。
总结
总的来说，使用 GraphQL 和生成客户端代码可以极大地简化你的 Web 应用程序开发过程。无论你是初学者还是经验丰富的开发者，在不断的学习和尝试中探索适合自己的 GraphQL 代码生成工具、插件和库，可以让你的开发工作更加轻松和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6591136deb4cecbf2d6478e8