在前端开发中，GraphQL 已经成为了一个非常流行的查询语言。为了更加方便的使用和管理 GraphQL，@graphql-codegen/cli 这个 npm 包应运而生。本文旨在介绍如何使用 @graphql-codegen/cli 包生成 GraphQL 代码，以及该包的学习和指导意义。
什么是 @graphql-codegen/cli 包？
@graphql-codegen/cli 是一个可用于自动生成 GraphQL 代码的命令行接口工具。它具有很多功能，比如可以生成 typescript、javascript、flow 等语言的 GraphQL 类型定义、客户端查询等代码，还能够根据 GraphQL 查询生成相应的 react hooks 代码，方便前端开发者快速便捷的使用 GraphQL。
如何使用 @graphql-codegen/cli 包？
为了使用 @graphql-codegen/cli 包，我们需要先通过 npm 进行安装。打开命令行工具，进入项目目录并输入以下命令：
npm install @graphql-codegen/cli --save-dev
安装完成后，我们还需要配置一个 YAML 或 JSON 格式的配置文件，告诉 @graphql-codegen/cli 包如何生成我们需要的代码。比如我们可以创建一个 codegen.yml 文件，输入以下内容：
-- -------------------- ---- -------
------- --------------------------------
----------
- ------------------
----------
---------------------------
--------
- ------------
- -----------------------
- -------------------------解释一下这些配置项的作用：
schema: 指定 GraphQL 服务的地址，该地址可以是本地的或线上的 GraphQL 服务。documents: 指定包含 GraphQL 查询的目录和文件，可以使用通配符。这里我们指定./src/**/*.graphql表示查询文件位于src目录的任意子目录下，且后缀为.graphql。generates: 指定代码生成的输出目录和文件，以及所使用的插件。在这个例子中，我们将会生成graphql.ts文件，并使用typescript、typescript-operations、typescript-react-apollo插件来生成代码。
配置好了 YAML 文件后，我们在命令行中输入以下命令，即可生成我们需要的 GraphQL 代码：
npx graphql-codegen --config codegen.yml
示例代码
在实际应用中，我们可以使用 @graphql-codegen/cli 包生成 typescript 的 GraphQL 代码，并使用 Apollo Client 来获取数据。这里提供一份示例代码：
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
------ - ---------------- - ---- ----------------------
----- ------ - --- --------------
---- -----------------------------------
------ --- ----------------
---
-- -- ------- --
----- ------------ - ----
----- ----------- -
--------------- --- -
---------------
------------
----------- -
--------------
-
------ -
-----------
-----------
-
-
-
--
-- ----
------
--------------------------
------ -------------
--
-------------- -- -
----------------------------------
--
-------------- -- -
---------------------
---总结
通过学习本文，我们了解了 @graphql-codegen/cli 包的使用方法和配置方式，以及生成 typescript 的 GraphQL 代码的示例。该包可以帮助前端开发者快速便捷的使用 GraphQL，并且可以为我们的项目提供更好的代码管理和维护能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/186624