TypeScript Academy · 课时

使用 GraphQL 代码生成器创建带类型的解析器

Q: 「使用 GraphQL 代码生成器创建带类型的解析器」这节课中我会学到什么？

编写具有正确输入和返回类型的解析器 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写具有正确输入和返回类型的解析器

使用 GraphQL 代码生成器创建带类型的解析器 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

解析器类型检查问题

GraphQL 解析器是普通函数，但如果没有类型化的签名，就很容易返回错误的结构。代码生成器会生成解析器类型，以确保返回值正确。

// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);

添加解析器插件

安装并配置 @graphql-codegen/typescript-resolvers，以生成解析器映射类型。

npm install --save-dev @graphql-codegen/typescript-resolvers

用于解析器的 codegen.yml

在基础 TypeScript 类型旁边添加解析器插件的输出配置。

# codegen.yml
generates:
  src/generated/types.ts:
    plugins:
      - typescript
  src/generated/resolvers.ts:
    plugins:
      - typescript-resolvers

使用生成的 ResolverMap

将生成的 Resolvers 类型应用于解析器映射对象，以获得完整的类型安全性。

import { Resolvers } from "./generated/resolvers";

const resolvers: Resolvers = {
  Query: {
    user: async (_, { id }) => fetchUser(id),
    // Return type enforced: must match User schema
  },
};

Context 类型检查

将您的上下文类型传递给 Resolvers 泛型，这样解析器函数就会接收具有类型的上下文对象。

interface Context { db: Database; user?: AuthUser; }

// codegen.yml
config:
  contextType: "src/context#Context"

// Generated: Resolvers<Context>
const resolvers: Resolvers<Context> = {
  Query: {
    me: (_, __, ctx) => ctx.user, // ctx: Context
  },
};

映射器类型

映射器类型可以将 GraphQL 类型映射到您的内部模型类型，这样解析器就能返回您的领域对象，而不是 GraphQL 输出类型。

# codegen.yml
config:
  mappers:
    User: "src/models#UserModel"

字段解析器类型检查

类型上的单个字段解析器也具有类型，包括父级和上下文参数。

// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
  User: {
    fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
    // parent is UserModel (from mapper)
  },
};

类型化变更

变更解析器会接收根据模式输入类型派生的、具有类型的输入参数。

// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
  Mutation: {
    createUser: (_, { input }) => {
      // input: CreateUserInput — fully typed
      return createUser(input.name, input.email);
    },
  },
};

类型化订阅

订阅解析器包含一个 subscribe 函数和一个 resolve 函数，这两个函数都由代码生成器提供类型。

const resolvers: Resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
      resolve: (payload) => payload.messageAdded, // typed
    },
  },
};

保持代码生成同步

添加预构建或预提交钩子，以便在模式发生更改时重新生成解析器类型，避免过时的类型进入生产环境。

// package.json
{
  "scripts": {
    "predev": "graphql-codegen",
    "prebuild": "graphql-codegen"
  }
}

回顾：类型化解析器

typescript-resolvers 代码生成插件会生成一个 Resolvers 类型，为所有 GraphQL 解析器强制规定正确的返回结构、参数类型和上下文结构。

快速检查

codegen 中的 contextType 配置选项有什么作用？

您学到了什么

使用代码生成器实现类型化的 GraphQL 解析器，可以在整个解析器映射中确保正确的返回类型、参数结构和上下文对象。请使用映射器类型表示领域对象，并将代码生成纳入构建流程，以防止发生偏离。

常见问题解答

「使用 GraphQL 代码生成器创建带类型的解析器」课时是免费的吗？

是的 — 「使用 GraphQL 代码生成器创建带类型的解析器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「使用 GraphQL 代码生成器创建带类型的解析器」这节课中我会学到什么？

编写具有正确输入和返回类型的解析器你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 GraphQL 代码生成器创建带类型的解析器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy