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 파일로 저장하고 기본 export의 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 상수, 기본 export로 구성됩니다.

interface나 union이 없는 스키마는 빈 possibleTypes 객체를 만듭니다. 생성은 브라우저 Web Worker에서 실행됩니다.

FAQ

예전 IntrospectionFragmentMatcher 형식인가요?

아니요. 출력은 Apollo Client 3이 사용하는 possibleTypes 형태(상위 타입 이름을 하위 타입 이름 배열에 매핑)이며, Apollo Client 2의 introspection 결과 형식이 아닙니다.

출력을 Apollo Client에서 어떻게 사용하나요?

기본 export를 import하고 result.possibleTypes를 new InMemoryCache({ possibleTypes })에 전달하세요.

사양 및 참고 자료

Apollo Client: defining possibleTypes manually