简介
graphql-codegen-core 是一个可以根据 GraphQL schema 生成 TypeScript 类型和代码的 npm 包，它具有以下特点：
- 可以生成 TypeScript 接口和类型定义。
- 可以生成各种 GraphQL 客户端通信层代码，例如 Angular，React 和 Vue。
安装
首先，你需要保证已经安装了最新版本的 Node.js 和 npm。在终端中输入以下命令来安装 graphql-codegen-core：
npm install graphql-codegen-core
使用
- 安装插件
请从插件列表中安装要使用的插件。以下是一些常用的插件：
npm install @graphql-codegen/typescript npm install @graphql-codegen/typescript-operations npm install @graphql-codegen/typescript-angular npm install @graphql-codegen/typescript-react-apollo npm install @graphql-codegen/typescript-vue-apollo
- 配置
编写配置文件 codegen.yml（或 codegen.json），并按照指示添加待处理的 GraphQL schema 和选项。以下是一个简单的示例：
schema: ./schema.graphql
generates:
./src/generated/graphql.ts:
plugins:
- 'typescript'
- 'typescript-operations'- 生成代码
在终端中运行以下命令来生成代码：
codegen --config codegen.yml
这将会根据 GraphQL schema 自动生成 TS 接口类型定义代码以及各种客户端通信代码，例如 Angular，React 和 Vue。
- 添加代码
现在把代码添加到项目中。例如，在 Angular 中，我们可以通过以下方式使用生成的代码：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
------ - ------- - ---- ----------------------
-------------
----------- -------
--
------ ----- --------- -
------------------- ------- ------- --
--------------- --------------- -
------ ------------------- ------ -------------------- ---
-
-这里的 graphql.GetSomething 是自动生成的查询接口。
注意事项
- GraphQL schema 中一定要使用可兼容的 ID，以便能够自动生成对应的 TypeScript 类型。
- 如果要分别生成不同的类型和代码，需要针对每个插件配置不同的生成目录和选项。
结语
通过使用 graphql-codegen-core，我们可以简便地生成 TypeScript 类型和代码，提高项目开发效率。它不仅对于初学者有很大的学习价值，对于在项目中使用 GraphQL 的开发者，也具有很大的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad3fb5cbfe1ea0610c20