[GraphQL] GraphQL Voyager

GraphQL Voyager는 GraphQL 스키마를 시각적으로 탐색할 수 있는 도구입니다.
GraphQL API의 타입, 필드, 관계를 자동으로 분석하여 인터랙티브 다이어그램 형태로 보여줍니다.

GraphQL Voyager의 주요 특징

1. GraphQL 스키마를 자동으로 다이어그램화

• 서버에서 제공하는 GraphQL 스키마를 분석하여 시각적으로 표현
• Entity 간의 관계(연관성, 종속성)를 직관적으로 확인 가능
• API 구조를 한눈에 파악 가능

2. 실시간 탐색 (Interactive UI)

• 다이어그램에서 엔티티를 클릭하면 세부 정보 표시
• 특정 엔티티를 검색하여 빠르게 찾을 수 있음
• 다이어그램을 드래그 & 줌(Zoom In/Out) 기능 지원

3. API 문서화 및 이해도 향상

• 복잡한 GraphQL API 구조를 한눈에 이해할 수 있어 문서화 도구로 활용 가능
• REST API의 Swagger처럼, GraphQL에서는 Voyager가 API 문서 역할을 함

4. 다양한 실행 환경 지원

• 웹 기반 (Live Demo 제공)
• Self-hosting 가능 (NPM, Docker 등)
• GraphQL API와 연동하여 실시간 데이터 반영 가능
  
  

GraphQL Voyager 사용 방법

1. 웹 브라우저에서 사용 (Live Demo)

👉 GraphQL Voyager Live Demo

• 직접 GraphQL API 엔드포인트 입력하여 다이어그램 확인 가능

2. 프로젝트에 설치 (NPM)

npm install graphql-voyager

이후 React 등에서 임포트하여 사용:

import { Voyager } from "graphql-voyager";

function MyGraphQLSchemaExplorer() {
  return <Voyager introspection={fetch("http://localhost:4000/graphql")} />;
}

3. Docker로 실행

docker run -p 8080:80 graphqlvoyager/graphql-voyager

• http://localhost:8080에서 실행됨
  
  

GraphQL Voyager 주요 기능

1. 엔티티 관계도 (Schema Graph)

• Query, Mutation, Subscription을 포함한 모든 타입(Entity)과 관계(Association) 를 시각화
• 각 타입의 필드를 확인할 수 있음

2. 필드 타입 및 관계 검색

• 특정 엔티티(예: User, Post 등) 를 검색하여 빠르게 찾기 가능
• 필드 타입(String, Int, Custom Type 등) 및 관계 확인 가능

3. 필터링 및 UI 조정

• 쿼리(Query)만 표시, 뮤테이션(Mutation) 숨기기 등 필터링 가능
• 그래프를 보기 편하도록 UI 조정 기능 제공

GraphQL Voyager vs Altair vs GraphiQL

비교 항목 GraphQL Voyager Altair GraphiQL

주요 기능	GraphQL 스키마 시각화	GraphQL API 테스트	GraphQL API 테스트
스키마 탐색	✅ 다이어그램 지원	🔹 JSON 형태	🔹 JSON 형태
쿼리 실행	❌ 불가능	✅ 가능	✅ 가능
Subscription 지원	❌ 불가능	✅ 가능	❌ 미지원
문서화 기능	✅ 강력함	✅ 기본 제공	✅ 기본 제공
설치 방식	NPM, Docker, Web	Web, Chrome, App	Web