简介
@graphql-codegen/typescript-resolvers 是一个使用 TypeScript 的 GraphQL Resolver 代码生成器，可以自动生成 GraphQL 的 Resolver 层代码。为了使代码更具可维护性和可读性，同时避免人为操作带来的不必要的错误。这个包提供了一种生成 TypeScript 类型安全的 resolver 代码的方案。
在本文中，我们将提供 @graphql-codegen/typescript-resolvers 的使用教程，帮助前端开发者了解这个包的基本用法，并快速上手使用。
安装
在开始使用之前，需要先安装 @graphql-codegen/typescript-resolvers。在终端中运行以下命令：
npm install @graphql-codegen/typescript-resolvers
使用
在安装完 @graphql-codegen/typescript-resolvers 之后，现在我们来看一下它如何使用。
创建 resolver 类型定义文件
我们首先需要创建一个 resolver 类型定义文件。
import { IResolvers } from '@graphql-tools/utils'; export interface IResolverMap extends IResolvers { // 输入你的 resolver 类型定义 }
在这个文件中，我们需要定义我们的 resolver 类型定义。你可以使用任何你熟悉的方式定义它们。重要的一点是，这个文件必须导出一个实现了 IResolvers 接口的对象，并且所有的 resolver 必须按照正确的格式进行定义。
定义我们的 resolver
现在，我们来创建一个简单的 Resolver：
export const resolvers: IResolverMap = { Query: { hello: (_: any, { name }: { name: string }) => { return `Hello ${name}!`; }, }, };
这个 Resolver 查询一个名字，并返回它的欢迎信息。
创建代码生成器配置文件
现在，我们需要在我们的项目根目录中创建一个代码生成器配置文件。我们可以用以下命令在终端中快速生成这个配置文件：
npx graphql-codegen init
在这个命令中，我们可以选择使用哪种代码生成器。这里，我们选择使用 typescript-resolvers 要求的代码生成器。在这个过程中，我们需要按照对话框的指示设置一些基本选项，例如我们的 GraphQL 端点的 URL，以及我们的 resolver 类型定义文件和输出路径等等。
运行代码生成器
当我们完成了代码生成器配置文件的修订后，现在我们需要运行代码生成器以生成一些 TypeScript 的 Resolver 代码。我们可以用以下命令运行代码生成器：
npx graphql-codegen
这个命令将会读取我们的代码生成器配置文件，并且根据其规则生成一些 TypeScript 的代码。
现在，我们可以找到刚才配置文件中指定的输出目录。这个目录中将会有一个带有 resolver 文件的 TypeScript 文件，其包含已自动生成的 Resolver 代码。
将已生成的 Resolver 代码和自己编写的 Resolver 代码合并
为了我们的代码能够正常工作，我们需要确保自己编写的 Resolver 代码和自动生成的 Resolver 代码不会冲突。一种解决方法是将所有的 Resolver 代码全部合并到一个文件中，并将其导出。可以像下面这样修改 resolver 类型定义文件来实现这件事：
-- -------------------- ---- ------- ------ - ---------- - ---- ----------------------- ------ - ------------------ - ---- -------------------- ------ --------- ------------ ------- ---------- - ------ - ------ ------------------- -- -展开代码
示例代码
以下是一个使用 @graphql-codegen/typescript-resolvers 的代码示例：
-- -------------------- ---- ------- ------ - ---------- - ---- ----------------------- --------- ---- - --- ------- ----- ------- ------ ------- - --------- ---- - --- ------- ------ ------- -------- ------- --------- ------- - --------- --------- - --- ------- - ------ --------- ------------ ------- ---------- - ------ - ----- -------- ---- ----- ---------- -- ---- - ---------- ----- -------- ---- ----- ---------- -- ---- - ---------- -- - ----- ------ ------ - - - --- ----- ----- ------ ------ ----------------- -- - --- ----- ----- -------- ------ ------------------- -- -- ----- ------ ------ - - - --- ----- ------ ------ -------- -------- -------- -- -- ------- --------- ---- -- - --- ----- ------ -------- -------------- -------- ------- ----- ------- ----------- --------- ---- -- -- ------ ----- ---------- ------------ - - ------ - ----- --- - -- -- -- --------------- -- ------- --- ---- ----- --- - -- -- -- --------------- -- ------- --- ---- -- --展开代码
以上代码定义了两个 Resolver，分别是 user 和 post 的查询，然后我们可以运行代码生成器来自动生成所需的 TypeScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/186627
