Skip to content
Numio

GraphQL Fragment Matcher Generator — Numio

Builds the possibleTypes map from a GraphQL schema using @graphql-codegen/fragment-matcher. Every interface and union is listed with the object types that implement or belong to it, ready for Apollo Client's InMemoryCache.

Configuring InMemoryCache({ possibleTypes }) so fragments on interfaces or unions match correctly in Apollo Client 3.

GraphQL Schema

Fragment Matcher

When to use it

  • Configuring InMemoryCache({ possibleTypes }) so fragments on interfaces or unions match correctly in Apollo Client 3.
  • Regenerating the possibleTypes map after adding a new type to a union, without running the codegen CLI.

How to use

  1. Paste a schema that contains interface or union definitions into the GraphQL Schema editor.
  2. Read the generated possibleTypes object; types that are not part of an interface or union do not appear.
  3. Save it as a .ts file and pass the default export's possibleTypes to 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

Details and limitations

Only the schema is used; this page has no Document editor.

The output is TypeScript: a PossibleTypesResultData interface, a typed result constant and a default export.

A schema without interfaces or unions produces an empty possibleTypes object. Generation runs in a Web Worker in your browser.

FAQ

Is this the old IntrospectionFragmentMatcher format?

No. The output uses the possibleTypes shape (supertype name mapped to an array of subtype names) used by Apollo Client 3, not the Apollo Client 2 introspection result format.

How do I use the output with Apollo Client?

Import the default export and pass result.possibleTypes to new InMemoryCache({ possibleTypes }).

Specifications and references