前言
随着GraphQL在近年来的普及，越来越多的开发者开始使用GraphQL来实现API的构建。GraphQL可以方便地管理多个API端点，且可以在客户端精确地指定需要的数据，这使得GraphQL在前端开发中变得越来越流行。
然而，GraphQL开发过程中的一些繁琐的工作，例如生成各种标准的hooks、组件和Typescript定义文件，却是比较累人的。这时，@graphql-codegen/add就是一款能够帮助解决这些问题的工具库。
安装
首先，我们需要在项目根目录下使用npm或者yarn安装@graphql-codegen包。
# 使用npm npm install graphql @graphql-codegen/cli @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev # 使用yarn yarn add graphql @graphql-codegen/cli @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --dev
如何使用@graphql-codegen/add
@graphql-codegen/add提供了一些常见的生成器，例如hooks、类型定义文件、组件等等。我们可以在项目中使用它来生成这些文件，从而大大减少重复造轮子的工作。
生成hooks
在使用@graphql-codegen/add生成hooks之前，我们需要先使用@graphql-codegen/cli生成配置文件。在项目根目录下新建一个名为codegen.yaml的文件，在该文件中输入如下配置信息：
-- -------------------- ---- -------
---------- ----
------- ----------------------------------------------
---------- ------------------
----------
-------------------------
--------
- ----------
- ---------------------
-----------------
--------
- ----------
- ---------------------
- -----------------------
-------
---------- ----在该配置文件中，我们需要指定GraphQL的schema和要生成的文件路径。同时，我们还需要指定使用哪些生成器，这里我们使用了typescript-react-apollo插件用于生成hooks。
接下来，我们可以使用如下命令来生成hooks：
npx graphql-codegen
生成的hook文件会自动放置在src/graphql下。
生成组件
与生成hook类似，我们也需要先配置好codegen.yaml文件。下面是一个用于生成组件和类型定义文件的配置示例：
-- -------------------- ---- -------
---------- ----
------- ----------------------------------------------
---------- ------------------
----------
-------------------------
--------
- ----------
- ---------------------
-------------------------------
--------
- ----------
- -----------------------
-------
-------------- ----
---------- ----
-------- -----
-------------------------
--------
- ----------
- ---------------------与生成hooks不同，使用typescript-react-apollo插件生成组件时，我们可以使用withComponent选项来指定是否生成组件代码。
使用如下命令，我们即可生成组件相关的代码：
npx graphql-codegen
生成的组件文件会自动放置在src/generated下。
总结
使用@graphql-codegen/add可以大幅减轻我们GraphQL开发过程中的工作量。通过简单的配置codegen.yaml文件，我们即可生成众多常见的代码组件，例如hooks、组件和类型定义文件。同时，@graphql-codegen/add也提供了其他丰富的功能，例如代码格式化等等。希望这篇教程能够帮助你更加了解这个npm包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/192734