GraphQL 是一种用于 API 的查询语言，它旨在为客户端提供更好的查询体验。虽然 GraphQL 相对于传统的 RESTful API 还是有很多优势的，但是由于其语言特性较为高级，因此在前端集成时可能会存在一些困难。这时，我们可以使用 npm 包 generate-graphql 来轻松地集成 GraphQL。
安装 generate-graphql
要使用 generate-graphql，我们需要先在本地安装它。在项目根目录下运行以下命令：
npm install -g generate-graphql
安装完成后，我们可以在终端使用 generate-graphql 命令了。
生成 GraphQL 客户端代码
生成 GraphQL 客户端代码是 generate-graphql 主要的功能之一。我们可以通过定义 schema 文件和 query/mutation 文件，然后使用 generate-graphql 来自动生成对应的 TypeScript 代码。
定义 schema 文件
schema 文件描述了 GraphQL 中的数据模型，我们需要先定义好 schema 文件才能使用 generate-graphql 生成 TypeScript 代码。
例如，我们在项目根目录下创建一个名为 schema.graphql 的文件，定义图片列表数据类型：
-- -------------------- ---- ------- ---- ----- - --- --- ----- ------- ---- ------- - ---- ----- - ------- --------- -
定义 query/mutation 文件
query/mutation 文件描述了客户端请求的具体操作，这些操作通常与 schema 的数据模型相关。
例如，我们在项目根目录下创建一个名为 images.graphql 的文件，定义获取图片列表的操作：
query getImages {
images {
id
name
url
}
}使用 generate-graphql 生成 TypeScript 代码
在项目根目录下运行以下命令：
generate-graphql --schema schema.graphql --outputDir src/graphql --client --queries images.graphql
以上命令的含义是：使用 schema.graphql 作为数据模型，将生成的 TypeScript 代码输出到 src/graphql 目录下，生成客户端代码，且只生成 images.graphql 文件中定义的 query。
生成的代码如下：
-- -------------------- ---- -------
------ ---- - ------------------ - ---- -----------------
------ - --- - ---- -----------------
------ - -- ------ ---- -----------------
------ ---- ----- - -
------------ --------
--- --------------
----- ------------------
---- ------------------
--
------ ---- ----- - -
------------ --------
------- -------------
--
------ ---- ----------------------- - ------- ----- -------- ------ ---
------ ---- -------------- - -
- ------------ ------- -
- - ------- -------
- ------------ ------- -
- ----------- ---- - ------ - ------
-- -
--
---
- ---------------------
-
- -- --- - ----- ------ - ----- ---------- ---- ------------------- --- ---- -- --- ------- ---- --- ---- ------
- ---- ---- --------- -------- ------------------- ------- -- ------ ---- ------ ------ ---- -------- -------- ------ --- --------- --------- --- --- --- -- -------- ---- ---- ------- -----
-
- ------ ----------- ------- ---- ---- -- ------ ---- --- ---------- -----
-
- --------
- -------------
- ----- - ----- -------- ------ ---------- ------------- - - -------------------
- ---------- -
- --
- ---
- ---
--
------ -------- ------------------------------- --------------------------------------- ------------------------- -
------ ------------------------------- ------------------------------------------- -------------
-
------ -------- ----------------------------------- ------------------------------------------- ------------------------- -
------ ----------------------------------- ------------------------------------------- -------------
-
------ ---- ------------------------ - ----------------- -------------------
------ ---- ---------------------------- - ----------------- -----------------------
------ ---- -------------------- - ---------------------------------- -------------------------我们可以在项目中引入这个 TypeScript 文件，并使用 useGetImagesQuery 这个 hooks 获取图片列表。
更多功能
除了生成 GraphQL 客户端代码以外，generate-graphql 还提供了其他一些功能，如自动生成服务端代码、从 CSV 文件生成 GraphQL 应用等等，欢迎在官方文档中查看更多相关内容。
结语
使用 generate-graphql，我们可以轻松地将 GraphQL 集成到前端应用中，并减轻了一部分手动编写代码的负担。希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588981e8991b448d5cc0