GraphQL 是一种由 Facebook 开发的 API 查询语言。它让客户端可以明确地调用出所需要的数据，并且可以将多个数据请求合并到单个请求中，从而大大提高了性能。但是，GraphQL 的语法相对较复杂，对于开发者来说并不容易。
为了解决这个问题，开发者可以使用 npm 包 graphql-client-generator，它可以根据 GraphQL 的 schema 自动生成查询语言并提供相应的工具函数，使得开发者在使用 GraphQL 时更为方便快捷。本教程将详细介绍如何使用该 npm 包。
安装
首先，需要在项目中安装 graphql-client-generator。可以使用 npm 或者 yarn 安装：
npm install --save graphql-client-generator # 或者 yarn add graphql-client-generator
生成客户端
在安装成功后，就可以使用 genClient 方法生成客户端。需要像下面这样导入 genClient：
import { genClient } from 'graphql-client-generator';然后，使用 genClient 指定 GraphQL schema 和输出目录：
-- -------------------- ---- ------- ----- ------ - - ---- ----- - - ---- ------ -------- - ---- -------- - - ------ ----------------- -------- ------- --------- ----- - ---- ---- - - ------ ------ ------ ------- ------ ---------- ------ - -- ----------- ------- ---------- -------------- ----------- ---------------- -- -------- -- -------------------- ------------ -- --------------------
上述示例中，将 GraphQL schema 定义为一个字符串，然后指定输出目录和客户端的名称。执行后，就可以在指定目录下看到自动生成的代码。
使用
生成客户端后，就可以在代码中使用了。假设上述的 GraphQL schema 已经被部署到服务端并运行，客户端代码如下所示：
-- -------------------- ---- ------- ------ - ------------ - ---- ----------------------------- ----- ------ - -------------- ---- ------------------------------- --- -- ------ ---------------------------------- -- - -------------------- --- -- ----- -------------------------- ------ ----- --- ------- ------- -- ---------------- -- - -------------------- ---
上述示例中，导入了生成的客户端代码，并利用 createClient 方法生成一个客户端实例，然后可以使用该客户端实例调用生成的工具函数进行查询或调用修改操作。
查询所有书籍的结果如下：
{
books: [
{ title: 'Book 1', author: 'Author 1', createdAt: '2022-02-28T16:00:00.000Z' },
{ title: 'Book 2', author: 'Author 2', createdAt: '2022-02-28T16:00:00.000Z' }
]
}创建一本书的结果如下：
{
createBook: { title: 'Book 3', author: 'Author 3', createdAt: '2022-02-28T16:00:00.000Z' }
}指南
在上述示例中，我们介绍了如何使用 npm 包 graphql-client-generator 自动生成 GraphQL 客户端代码并使用该客户端与服务端交互。值得注意的是，参数和结果都需要符合 GraphQL schema 的定义。
除此之外，我们还可以使用生成的工具函数以及一些 GraphQL 的语言特性，比如变量、片段、查询别名等等，来进一步实现更多的需求。
对于更为详细的使用指南，可以参考 npm 包 graphql-client-generator 的文档。在使用过程中如有疑问，也可以查看 GraphQL 的相关文档。GraphQL 社区提供了非常多的资源和工具，可以大大简化开发者的工作。
结论
本文介绍了 npm 包 graphql-client-generator 的使用方法，通过自动化生成 GraphQL 客户端代码，提高了开发效率。同时，也介绍了如何使用生成的客户端与服务端进行交互，并简要介绍了 GraphQL 的一些语言特性和资源。希望读者可以通过本文了解到更多 GraphQL 和前端相关的知识，从而更好地应用该技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac66840