GraphQL 是一种基于类型定义和查询语言的 API 技术。对于前端开发者来说，GraphQL 及其相关的工具包已经成为了日常开发中不可或缺的技术之一。而该技术的增长和普及也带来了越来越多的项目需要使用 GraphQL。
在 GraphQL 项目中，自动生成代码以避免手写的工作量是一种标准做法。而快速生产高质量代码的方法之一就是使用 graphql-codegen-typescript-common 这个 npm 包。该 npm 包将用 TypeScript 快速轻松地生成代码，减轻相关工作量。在本篇文章中，我们将探讨 graphql-codegen-typescript-common 的使用事项。
安装
使用 graphql-codegen-typescript-common 很简单，只需在项目中运行以下命令即可安装：
npm install -D @graphql-codegen/cli @graphql-codegen/typescript-common \ @graphql-codegen/typescript-client @graphql-codegen/typescript-resolvers \ @graphql-codegen/typescript-server
为了方便使用，我们可以将上述命令写入安装甚至部署建设的脚本中。
使用
- 使用 graphql-codegen-typescript-common 的第一步是在项目中定义一个 schema.graphql 文件。该文件包含了项目中所有 GraphQL API 所需的定义。放入以下示例：
-- -------------------- ---- ------- ---- ----- - -------- ----- ---- - ---- ---- - --- --- --------- ------- ------ ------- -
- 使用以下命令将 schema.graphql 文件转换为 TypeScript 定义：
npx graphql-codegen --config codegen.yml
其中，codegen.yml 为代码生成器的配置文件，可以在项目目录下任意位置创建。该文件如下：
-- -------------------- ---- -------
---------- ----
------- --------------
---------- ----
----------
-------------------------
--------
- -----------------
- -----------------
- -----------------
- --------------------通过指定 schema.graphql 文件和生成文件的位置与类型，graphql-codegen-typescript-common 将会在运行时自动生成代码。在我们的项目结构中，生成代码会被写入 src/generated/graphql.ts 文件中。若该文件尚未存在，则会自动创建。
- 查看生成代码
打开 src/generated/graphql.ts 文件，即可看到自动生成的代码。该文件包含以下内容：
- 客户端查询的实现（type Query）
- 服务器端的解析器（type Resolvers）
- 手动实现的客户端操作（type Mutation）
查询实现可能包含多个函数，每个函数表示查询中的一个请求。每个函数会接收参数，返回 Promise，以便异步运行。
示例代码
下面是一个简单的代码示例，展示了如何使用 graphql-codegen-typescript-common 自动生成代码并调用查询。
-- -------------------- ---- -------
------ - -- ------- ---- ----------------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- -------------------------------
---
----- -------- - --- ------------- -- -
------ ------------------
------- -------
---------- - ------ - --
--
------------ -- -
-------------------------
--
------------ -- --------------------
-
-----------结论
graphql-codegen-typescript-common 是一个非常有用的 npm 包，我们可以使用它轻松地为我们的项目生成高质量代码。在日常开发中使用代码生成器可以减少工作量，提高代码质量，并保持代码的一致性。此外，在使用 TypeScript 进行开发的项目中，该工具的优势尤为突出。因此，我们强烈建议在您的下一个 GraphQL 项目中尝试使用 graphql-codegen-typescript-common。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad42b5cbfe1ea0610c2e