高效匹配：生成GraphQL片段匹配器 — Numio

使用 @graphql-codegen/fragment-matcher 根据 GraphQL schema 生成 possibleTypes 映射。每个 interface 和 union 都会列出实现它或属于它的对象类型，可直接用于 Apollo Client 的 InMemoryCache。

配置 InMemoryCache({ possibleTypes })，使 Apollo Client 3 中基于 interface 或 union 的 fragment 能正确匹配。

GraphQL Schema

Fragment Matcher

适用场景

配置 InMemoryCache({ possibleTypes })，使 Apollo Client 3 中基于 interface 或 union 的 fragment 能正确匹配。
向 union 添加新类型后重新生成 possibleTypes 映射，无需运行 codegen CLI。

使用方法

将包含 interface 或 union 定义的 schema 粘贴到 GraphQL Schema 编辑器。
查看生成的 possibleTypes 对象；不属于任何 interface 或 union 的类型不会出现。
保存为 .ts 文件，并将默认导出的 possibleTypes 传给 InMemoryCache。

GraphQL schema

interface Node {
  id: ID!
}
type User implements Node {
  id: ID!
  name: String!
}
type Post implements Node {
  id: ID!
  title: String!
}
union SearchResult = User | Post
type Query {
  search(term: String!): [SearchResult!]!
}

possibleTypes（TypeScript）

export interface PossibleTypesResultData {
  possibleTypes: {
    [key: string]: string[]
  }
}
const result: PossibleTypesResultData = {
  possibleTypes: {
    Node: ["User", "Post"],
    SearchResult: ["User", "Post"],
  },
}
export default result

功能与限制

只使用 schema；本页面没有 Document 编辑器。

输出为 TypeScript：一个 PossibleTypesResultData 接口、一个带类型的 result 常量和一个默认导出。

没有 interface 或 union 的 schema 会得到空的 possibleTypes 对象。生成在浏览器的 Web Worker 中运行。

FAQ

这是旧的 IntrospectionFragmentMatcher 格式吗？

不是。输出使用 Apollo Client 3 的 possibleTypes 结构（父类型名映射到子类型名数组），而不是 Apollo Client 2 的 introspection 结果格式。

如何在 Apollo Client 中使用输出？

导入默认导出，并将 result.possibleTypes 传给 new InMemoryCache({ possibleTypes })。

规范与参考资料

Apollo Client: defining possibleTypes manually