시작하기
시작하기Voyager 클라이언트 소개

Voyager 클라이언트 소개

Gato GraphQL은 GraphQL 스키마를 인터랙티브하게 시각화하기 위한 GraphQL Voyager 클라이언트를 제공합니다. 플러그인 메뉴에서 "Interactive Schema"를 클릭하여 접근할 수 있습니다:

GraphQL Voyager 클라이언트

Voyager는 GraphQL 스키마의 전체 구조를 조감도 형식으로 표시합니다:

데이터 조회를 위한 스키마 시각화

타입 간의 연결을 화살표로 표시하여 스키마 내 모든 요소가 서로 어떻게 연관되어 있는지 쉽게 이해할 수 있습니다:

스키마 요소

스키마에는 모든 관계를 계산하는 시작점, 즉 기준 타입이 있습니다. 기본적으로 이는 쿼리 루트(이 경우 QueryRoot 타입으로 처리됨)이며, 하단의 플로팅 패널에 표시됩니다. 뮤테이션에 관한 스키마를 시각화하려면 해당 뮤테이션 루트 타입(이 경우 MutationRoot)을 선택하면 됩니다:

GraphQL 타입, 플로팅 패널 위

다른 GraphQL 타입으로 뷰 전환

뮤테이션 루트에서의 뷰로 전환된 상태

스키마에서 타입을 클릭하면 해당 연결이 강조 표시되고 필드의 메타데이터가 표시됩니다(왼쪽 패널에서 타입 이름을 클릭해도 동일한 결과를 얻을 수 있습니다):

타입 강조 표시

왼쪽 패널의 검색 입력란을 사용하여 스키마 요소를 필터링할 수 있습니다:

스키마 요소 필터링

연결을 클릭하면 스키마와 왼쪽 패널 양쪽에서 모두 강조 표시됩니다:

연결 강조 표시

마우스(및 화면 오른쪽 하단의 버튼)를 사용하여 그래프 내에서 탐색하고, 확대/축소, 임의 방향 이동, 요소에 포커스를 맞출 수 있습니다:

그래프 탐색

하단의 플로팅 패널에는 몇 가지 추가 옵션이 있습니다:

  • "Sort by alphabet" — 각 타입의 모든 필드를 알파벳 순으로 정렬합니다
  • "Skip Relay" — Relay의 래퍼 클래스를 숨깁니다
  • "Skip deprecated" — 더 이상 사용되지 않는 필드를 모두 숨깁니다
  • "Show leaf fields" — 연결이 아닌 모든 필드를 표시합니다

추가 옵션