随着 GraphQL 在前端开发中的应用日益普及，自动生成 GraphQL 的代码也变得越来越重要。One of the most popular生成工具之一是 @micimize/graphql-code-generator，它能够帮助我们根据 GraphQL Schema 自动生成 TypeScript 类型和查询用到的代码。
安装
使用 npm 安装:
$ npm install @micimize/graphql-code-generator --save-dev
配置
在项目中创建 codegen.yml 文件，或在 package.json 中创建 graphqlCodegen 键：
-- -------------------- ---- -------
- -----------
------- -------------------------------
---------- ------------------
----------
--------------------------
--------
- ------------
- -----------------------
- -------------------------这是一个简单的配置文件示例，指定了 schema、查询文件以及生成的文件位置。这里使用的插件有：
typescript：自动生成 GraphQL 的 TypeScript 类型；typescript-operations：生成 TypeScript 可执行代码，例如查询和变异；typescript-react-apollo：添加React-Apollo支持，包括Query,Mutation, 和Subscriptioncomponents。
以上是代码生成器的一个推荐的配置示例，根据自己的具体情况进行调整。
运行
安装配置完成后运行以下命令即可自动生成 GraphQL 代码：
$ npx graphql-codegen
生成结果
在运行后，代码生成器将生成一个新文件 generated/graphql.tsx，包含以下内容：
- 类型定义
Query,Mutation, 和Subscription; - 这些操作的执行代码；
- 所需的每个部件的类型。
这些生成的文件可以帮助开发者更好地理解 GraphQL 架构，减少手动编写代码的工作量，提高生产效率。
总结
随着 GraphQL 在前端开发中的应用日益普及，自动生成 GraphQL 的代码越来越受到重视。此时使用 @micimize/graphql-code-generator 工具非常适合帮助我们根据 GraphQL Schema 自动生成 TypeScript 类型和查询用到的代码。在本文中，我们重点介绍了其安装、配置和运行，以及生成的结果。希望本文能帮助大家更好地使用这个工具，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e24471f