Logo
리소스
리소스GraphQL 클라이언트

GraphQL 클라이언트

GraphQL과 상호작용하기 위한 가장 인기 있는 클라이언트들을 정리한 개요입니다.

GraphiQL

GraphiQL은 GraphQL 쿼리를 실행하기 위한 대표적인 IDE입니다. GraphQL과 함께 처음 출시된 이 도구는, GraphQL 서버에 대해 쿼리를 실행하는 클라이언트와 스키마 문서를 탐색하는 익스플로러를 한 곳에 통합함으로써, GraphQL이 기존 API보다 우수한 개발 경험을 제공할 수 있음을 즉각적으로 증명하였습니다.

GraphiQL

GraphiQL은 특히 다음과 같은 기능을 제공합니다:

  • 탭
  • 커스텀 헤더
  • 구문 강조
  • 필드, 인수, 타입 등에 대한 지능형 자동 완성
  • 쿼리와 변수에 대한 실시간 오류 강조 및 보고
  • 쿼리와 변수 자동 완성
  • 필수 필드의 쿼리 자동 추가
  • 마크다운을 지원하는 문서 익스플로러 및 검색
  • 로컬 스토리지를 이용한 쿼리 기록
  • 테마

graphql.org/swapi-graphql에서 데모를 이용하실 수 있습니다. 에디터를 통해 GraphQL 쿼리를 작성하고, 두 패널 중앙의 "Execute Query" 버튼을 누르면 쿼리에 대한 응답을 확인하실 수 있습니다.

Voyager

GraphQL Voyager는 인터랙티브 스키마 시각화 도구의 대명사로, 해당 문서에서 언급하듯 "GraphQL 이면의 그래프"를 시각화합니다.

Voyager

다음과 같은 기능을 갖추고 있습니다:

  • 그래프 위에서의 빠른 탐색.
  • 각 타입에 대한 상세 정보를 제공하는 왼쪽 패널.
  • Relay 래퍼 클래스를 제거하여 그래프를 단순화하는 "Skip Relay" 옵션.
  • 그래프의 루트로 임의의 타입을 선택할 수 있는 기능.

ivangoncharov.github.io/graphql-voyager에서 라이브 데모를 이용하실 수 있습니다.

DociQL

DociQL은 GraphQL 엔드포인트에서 아름다운 정적 HTML5 문서를 생성하는 명령어를 제공합니다. 명령어를 실행하면 HTML, CSS, JS 파일을 포함하는 디렉터리가 생성되며, 이를 웹 서버에 복사하여 GraphQL 스키마 문서를 표시할 수 있습니다.

생성된 문서는 기본적으로 3열 단일 페이지 레이아웃으로 표시되며, 왼쪽 열에는 모든 타입 링크, 중앙에는 설명, 오른쪽에는 예시 쿼리가 배치됩니다:

DociQL

다음과 같은 기능을 갖추고 있습니다:

  • introspection 쿼리를 사용하여 GraphQL 스키마를 가져오고, 문서를 즉시 생성합니다.
  • "Try it now" 링크가 포함된 요청 및 응답 예시를 생성합니다.
  • 사용자가 유스케이스를 정의하고 도메인별로 그룹화할 수 있습니다.
  • Handlebars 템플릿과 SCSS 스타일을 통해 구성 가능합니다.
  • API 설명 내 마크다운을 지원합니다.
  • 모든 디바이스와 화면 크기에서 동작하는 반응형 HTML5·CSS3 레이아웃.
  • 기존 웹사이트에 삽입 가능한 부분 문서.

생성된 문서의 데모는 wayfair.github.io/dociql에서 이용하실 수 있습니다.

SpectaQL

SpectaQL은 DociQL을 기반으로 구축되어 GraphQL에 더욱 적합하게 개선된 도구입니다. GraphQL 관련 정보만 표시하는 테마를 제공하며, Swagger/OpenAPI 도메인의 콘텐츠(예: 쿼리 예시에 표시되는 "Response Content-Types: application/json" 및 "Response Example (200 OK)" 메시지)를 제거합니다.

SpectaQL

SpectaQL은 다양한 옵션을 통해 GraphQL 스키마 소스를 입력할 수도 있습니다:

  • introspection 쿼리를 사용하여 라이브 엔드포인트에서 가져오는 방법.
  • introspection 쿼리 결과를 포함하는 파일에서 가져오는 방법.
  • SDL의 스키마 정의를 포함하는 파일, 여러 파일, 또는 glob에서 가져오는 방법.

생성된 문서의 데모는 useanvil.com/docs/api/graphql/reference에서 확인하실 수 있습니다.

Postman

Postman은 API를 구축하고 사용하기 위한 API 플랫폼입니다. GraphQL 전용으로 만들어진 것은 아니지만, Postman을 통해 GraphQL 쿼리를 실행하고 GraphQL API 생성 시 팀 협업을 효율화할 수 있습니다.

Postman

Postman은 API 라이프사이클을 가속화하는 도구들을 포함하고 있으며, API 설계, 테스트, 문서화, 목업 등을 지원합니다. 또한 워크스페이스를 통해 API를 정리하고 전 세계에 분산된 팀원들과 협업할 수 있습니다.

Altair

Altair는 Postman과 유사하지만 GraphQL 전용인 또 하나의 GraphQL Client IDE입니다.

Altair

모든 GraphQL Client IDE가 제공하는 기능에 더하여, Altair는 환경(로컬, 스테이징, 프로덕션 환경의 API 전환 가능)과 쿼리 컬렉션(팀원과 손쉽게 공유 가능)도 제공합니다.