前言
GraphQL 是一种可以改善前端和后端数据交互的技术，通过 GraphQL 可以统一前后端的接口定义和数据传输格式。在使用 GraphQL 过程中，前端进行数据查询时，需要将 GraphQL 查询语句编写成字符串的形式，这种方式既不直观也容易出错，容易出现语法错误或者查询属性名错误等问题。
针对这个问题，有一个叫做 graphql-codegen-typescript-client 的 npm 包可以帮我们解决这个问题，本文将详细介绍它的使用方式。
什么是 graphql-codegen-typescript-client？
graphql-codegen-typescript-client 是一个可以将 GraphQL 查询语句转换为 TypeScript 类型定义的 npm 包，它可以帮助开发者在使用 GraphQL 查询时，避免手写查询语句，简化了代码编写复杂度。
如何使用 graphql-codegen-typescript-client？
接下来将详细介绍 graphql-codegen-typescript-client 的使用方式。
安装
首先需要全局安装 graphql-cli 包，具体安装方式和使用可以参考其官方文档。
npm install -g graphql-cli
接着安装 graphql-codegen-typescript-client 包。
npm install graphql-codegen-typescript-client --save-dev
配置
在项目根目录下新建一个 codegen.yml 文件，该文件用于配置代码生成的相关信息，对应的详细配置项请参考官方文档。
schema: "http://localhost:4000/graphql"
documents: "src/**/*.graphql"
generate:
- generator: "graphql-codegen-typescript-client"
output: "src/generated/graphql.ts"
config: {}在 schema 标签下填写 GraphQL API 接口地址，documents 标签下填写存放 GraphQL 查询文档的目录地址，generate 标签下填写代码生成器相关信息。其中 generator 填写 graphql-codegen-typescript-client，output 是生成的代码输出地址，config 是该代码生成器的配置项。
生成代码
在终端中输入以下命令，即可生成 TypeScript 类型定义和查询代码。
graphql-codegen
代码生成完毕后，会在 output 指定的目录下生成一个 graphql.ts 文件，其中包含了所有接口的查询语句和类型定义。可以在使用查询的地方引入该 graphql.ts 文件，并使用其中的类型定义进行类型检查。
-- -------------------- ---- -------
------ - ------------- --- - ---- -----------------
------ - ---------------- ------------- ----------------- -------------- ---------------- ---------------- - ---- ----------------------
----- ------ - --- --------------
---- --------------------------------
---
-- --------
-----------------------------
------ -----------------
--
------------ -- ---------------------
-- -- -----
----- -------- - -- -- -
----- - ----- -------- ----- - - -------------------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
-------------------- -- -
--- -------------------------------
---
-----
--
--可以看到，我们无需再去编写 GraphQL 查询语句，而是直接调用生成的查询方法或者使用 hooks 进行查询。如果需要添加新的查询或者修改查询，只需要改动 GraphQL 查询文档，然后重新运行 graphql-codegen 命令即可。
总结
本文介绍了 graphql-codegen-typescript-client 包用于简化前端 GraphQL 代码编写的方式。通过该包的使用，避免了手写查询语句的问题，同时也可以在 TypeScript 中进行类型检查，提高代码的可靠性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad41b5cbfe1ea0610c2c