Logo
시작하기
시작하기GraphiQL 클라이언트 소개

GraphiQL 클라이언트 소개

Gato GraphQL은 GraphQL 서비스와 상호작용하기 위한 GraphiQL 클라이언트를 제공합니다. 플러그인 메뉴에서 「GraphiQL」을 클릭하여 접근할 수 있습니다:

GraphiQL 클라이언트

GraphiQL을 사용하면 GraphQL 쿼리를 작성하고 실행하며 응답을 확인할 수 있습니다:

GraphiQL로 쿼리 실행하기

GraphiQL 클라이언트 가이드

GraphiQL 클라이언트를 사용하여 GraphQL 쿼리를 작성하고 실행하는 방법을 설명합니다.

GraphQL 쿼리는 왼쪽 패널에서 작성합니다:

GraphiQL 클라이언트

GraphiQL에는 GraphQL 구문에 대한 구문 강조 기능이 있습니다. 쿼리를 작성하기 시작하면 오퍼레이션 이름, 열기/닫기 괄호, 필드, 인수, 디렉티브, 주석이 각각 다른 색상으로 표시되어 쿼리 구조를 쉽게 파악할 수 있습니다:

구문 강조

처음 로드될 때 GraphiQL은 인트로스펙션을 통해 GraphQL 스키마의 메타데이터를 가져옵니다. 스키마 메타데이터 덕분에 쿼리 작성 중 언제든지 GraphiQL이 자동완성 옵션을 제안합니다:

자동완성 제안

문서 탐색기를 통해 스키마 메타데이터를 탐색할 수도 있습니다. 열려면 「Docs」 버튼을 클릭하세요:

Docs 버튼

문서 탐색기가 오른쪽에 표시됩니다:

문서 탐색기

GraphQL 타입 이름을 클릭하면 문서 탐색기에 다음 정보가 표시됩니다:

  • 타입 설명
  • 구현하는 인터페이스
  • 모든 필드 목록 (다음을 포함):
    • 받는 인수
    • 반환 타입 (클릭하여 상세 정보 확인 가능)
    • 필드 설명

타입 이름 클릭하기

타입 정보 표시하기

언제든지 스키마의 모든 요소를 검색하고 정보를 가져올 수 있습니다:

검색하기

쿼리 내의 요소에 마우스를 올리면 해당 정보가 표시되고, ctrl (또는 cmd) + 클릭하면 문서 탐색기에서 표시됩니다:

스키마 요소 클릭하기

하단의 「Query variables」 패널을 클릭하면 쿼리에 전달할 변수를 variable => value의 JSON 맵 형식으로 입력할 수 있습니다:

Query variables 패널 열기

쿼리 변수 입력하기

GraphQL 쿼리를 실행하려면 「Run」 버튼을 누르거나 ctrl (또는 cmd) + enter를 누르세요:

GraphQL 쿼리 실행하기

GraphQL 응답은 중앙 패널에 표시됩니다:

GraphQL 쿼리 응답

상단 패널에는 GraphiQL용 다양한 애드온이 있습니다:

GraphiQL 애드온

각 애드온 버튼을 클릭하면 다음 동작이 실행됩니다:

  • 「Prettify」는 GraphQL 쿼리를 정리합니다
  • 「History」는 최근 이전 쿼리 목록을 표시하며, 클릭하면 쿼리 에디터에 입력됩니다
  • 「Explorer」는 GraphiQL Explorer 패널을 엽니다

GraphiQL Explorer는 매우 유용한 애드온입니다. 모든 필드 목록이 표시되며, 클릭하면 에디터의 쿼리에 추가되어 GraphQL 쿼리를 시각적으로 작성할 수 있습니다:

GraphiQL Explorer