Handytool
개발자 가이드5분 읽기2026년 3월 10일에 업데이트됨

브라우저 전용 GraphQL 도구

모든 GraphQL 문서를 형식화하고 구문 오류를 즉시 포착하세요.

Handytool의 GraphQL 포매터는 공식 graphql.js 파서를 사용하여 쿼리, 변형, 스키마 정의를 정규 들여쓰기로 재형식화합니다 — 서버 없음, 가입 없음, 아무것도 업로드되지 않습니다.

핵심 요점

  • 01공식 graphql.js 파서를 사용하여 쿼리, 변형, 구독, SDL 스키마를 형식화합니다.
  • 02구문을 검증하고 오류에 대한 정확한 줄과 열을 보고합니다 — 스키마가 필요하지 않습니다.
  • 03GraphQL 주석(#)은 형식화 시 제거됩니다. 보존하려는 설명서는 설명 문자열을 사용하세요.
  • 04브라우저에서 완전히 실행됩니다 — 내부 API 쿼리 및 독점 스키마는 비공개입니다.

GraphQL 문서를 형식화하는 이유는?

GraphQL 쿼리는 빠르게 복잡해질 수 있습니다 — 중첩된 조각, 인라인 변수, 여러 작업 정의, 인터페이스와 지시자가 있는 SDL 유형 정의. 일관된 형식화는 피어 검토를 더 빠르게 만들고 누락된 닫는 중괄호 또는 인수 불일치를 한눈에 쉽게 찾을 수 있습니다.

포매터는 참조 graphql.js 파서를 사용합니다 — GraphQL 사양이 제공하는 동일한 파서입니다. 즉, 여기에서 얻는 정규 형식화는 Prettier의 GraphQL 플러그인 및 대부분의 GraphQL 도구에서 생성하는 것과 일치합니다. 여기에서 깨끗하게 구문 분석되는 모든 것은 Apollo, Relay, graphql-request에서 깨끗하게 구문 분석됩니다.

GraphQL 문서를 형식화하는 방법

  1. 01

    GraphQL을 붙여넣으세요

    쿼리, 변형, 구독, 조각 또는 SDL 스키마 정의를 입력 패널에 붙여넣으세요.

  2. 02

    형식화를 클릭하세요

    파서는 정규 들여쓰기 — 2칸 들여쓰기, 줄당 하나의 필드, 일관된 인수 정렬로 문서를 내보냅니다. 결과는 출력 패널에 나타납니다.

  3. 03

    선택적으로 검증하세요

    검증을 클릭하여 형식화된 출력을 생성하지 않고 문서가 구문 분석되지 않는지 확인하세요. 결과는 확인 또는 줄과 열 번호가 있는 구문 오류 목록입니다.

  4. 04

    결과를 복사하세요

    복사를 클릭하여 형식화된 문서를 복사합니다. 코드베이스, PR 설명 또는 설명서 파일에 붙여넣으세요.

내부 스키마 및 API 쿼리에 안전합니다

graphql.js 파서는 브라우저에서 완전히 실행됩니다. 작업 텍스트나 스키마 정의가 서버로 전송되지 않습니다. 이렇게 하면 비공개 필드 이름을 참조하거나 제3자 도구에 노출하지 않으려는 내부 유형 시스템을 참조하는 쿼리를 형식화하기에 안전합니다.

여기서 검증은 구문 전용입니다 — 도구는 문서가 유효한 GraphQL 문서인지 확인하지만 필드 이름이 실제 스키마에 있는지, 변수가 인수 유형과 일치하는지, 지시자가 올바르게 적용되는지는 확인하지 않습니다. 스키마 인식 검증에는 대상 스키마를 문서와 함께 로드해야 합니다.

GraphQL 포매터 FAQ

GraphQL 형식화가 스키마에 대해 검증합니까?

아니요 — 구문 검증만 수행합니다. 필드와 인수가 있는지 확인하려면 대상 스키마가 필요합니다. 이 도구는 문서가 유효한 GraphQL 문서인지 확인합니다.

내 GraphQL의 주석이 보존됩니까?

아니요. #로 시작하는 줄은 파서에 의해 제거됩니다. 형식화를 통해 생존해야 하는 문서는 삼중 인용 설명 문자열을 사용하세요.

어떤 GraphQL 사양 버전이 지원됩니까?

2021년 10월 사양, OneOf 입력 객체 및 @specifiedBy 지시자를 포함합니다.

작업 문서가 아닌 SDL 스키마 정의를 형식화할 수 있습니까?

네. 유형 정의, 인터페이스 선언, 합집합 유형, 열거형, 지시자, 설명 모두 포매터를 통해 올바르게 왕복합니다.

쿼리 또는 스키마가 어디든지 업로드됩니까?

아니요. graphql.js 파서는 브라우저에서 완전히 실행됩니다 — 아무것도 기기를 떠나지 않습니다.

관련 도구

개발자 도구로 계속 작업하기

개발자 도구