GraphQLフラグメントマッチングジェネレーター — Numio

@graphql-codegen/fragment-matcher を使って GraphQL スキーマから possibleTypes マップを作ります。各 interface と union について、それを実装する・それに属するオブジェクト型が列挙され、そのまま Apollo Client の InMemoryCache に使えます。

Apollo Client 3 で interface や union に対する fragment が正しくマッチするよう、InMemoryCache({ possibleTypes }) を設定する。

GraphQL Schema

Fragment Matcher

こんなときに使えます

Apollo Client 3 で interface や union に対する fragment が正しくマッチするよう、InMemoryCache({ possibleTypes }) を設定する。
union に型を追加したあと、codegen CLI を実行せずに possibleTypes マップを作り直す。

使い方

interface または union の定義を含むスキーマを GraphQL Schema エディターに貼り付けます。
生成された possibleTypes オブジェクトを確認します。interface や union に属さない型は現れません。
.ts ファイルとして保存し、デフォルトエクスポートの possibleTypes を InMemoryCache に渡します。

GraphQL スキーマ

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

仕様と制限

使うのはスキーマだけです。このページには Document エディターがありません。

出力は TypeScript で、PossibleTypesResultData インターフェース、型付きの result 定数、デフォルトエクスポートから成ります。

interface も union もないスキーマでは空の 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