Loading…

소개 온라인 GraphQL 포맷터

GraphQL SDL과 작업을 가독성 있고 일관성 있게 유지하세요. 이 온라인 GraphQL 포맷터는 Prettier의 GraphQL 파서를 사용하여 문서를 재정렬, 줄 바꿈 및 표준화합니다. 가능하면 브라우저에서 실행되고 필요시 서버 포맷터로 대체되어 도구에 대해 생각하지 않고도 안정적인 출력을 얻을 수 있습니다.

이 GraphQL 포맷터의 기능

  • Prettier의 GraphQL 파서를 사용하여 일관된 커뮤니티 표준 포맷팅 적용
  • 쿼리, 뮤테이션, 서브스크립션, 프래그먼트 및 전체 스키마 SDL(타입, 인터페이스, 유니온, 열거형, 입력, 지시문) 지원
  • 조정 가능한 들여쓰기: 공백 또는 탭 선택 및 들여쓰기 크기 구성(1–8)
  • 구성 가능한 열 너비를 통한 선택적 줄 길이/줄 바꿈 제어
  • 레이아웃을 정규화하면서 설명(`"""…"""`)과 인라인 주석을 그대로 유지
  • 포맷팅의 일부로 GraphQL 문서 구조를 검증합니다. 잘못된 구문은 코드를 조용히 망가뜨리는 대신 오류를 표시합니다
  • 하이브리드 실행: 가능하면 브라우저에서 Prettier 실행, 필요시 서버 포맷터로 대체
  • .graphql / .gql 파일을 붙여넣거나 업로드한 후 포맷된 결과를 미리보기, 복사 또는 다운로드

📝 온라인에서 GraphQL 포맷팅하는 방법 for graphql-formatter

1

GraphQL 붙여넣기 또는 업로드

편집기에 GraphQL 스키마나 쿼리를 붙여넣거나 `.graphql` / `.gql` 파일을 드롭하세요. 이 포맷터는 SDL과 작업 문서 모두에 작동합니다.

2

포맷팅 옵션 조정

스페이스나 탭을 선택하고, 들여쓰기 크기를 설정하며, 선호하는 줄 길이를 구성하세요. 이러한 옵션들은 Prettier의 GraphQL 포맷터에 전달됩니다.

3

포맷팅, 검토 및 내보내기

포맷팅을 적용하려면 포맷 버튼을 클릭하세요. 미리보기 창에서 결과를 검토한 후 편집기에 다시 복사하거나 포맷팅된 파일을 다운로드하세요.

기술 사양

지원 입력

표준 GraphQL 스키마 및 작업 문서용으로 설계되었습니다.

유형예시참고
스키마 SDLschema.graphql, schema.gql타입, 인터페이스, 유니온, 열거형, 입력, 지시어, 스키마 정의
작업queries.graphql, app.gql쿼리, 뮤테이션, 서브스크립션 및 프래그먼트
확장별도 파일의 스키마 확장예: `extend type Query { … }` 블록

포맷팅 엔진

포맷팅은 Prettier의 GraphQL 지원을 사용하여 수행됩니다. 대부분의 경우 Prettier는 경량 런타임을 통해 브라우저에서 실행됩니다. 현재 환경에서 GraphQL 플러그인을 확인할 수 없는 경우, 포맷터는 서버 측 Prettier 작업자로 원활하게 대체됩니다.

사용 가능한 옵션 (Prettier에 매핑됨)

옵션동작일반 값
들여쓰기 스타일스페이스와 탭 중 선택스페이스(기본값) 또는 탭
들여쓰기 크기들여쓰기 수준당 스페이스 수 (스페이스 사용 시)1–8, 기본값: 2
줄 길이긴 선택 영역을 줄바꿈/분할하기 위한 대상 열0–120 (0 ≈ 효과적으로 줄바꿈 없음)

제한 및 성능

이 도구는 일반적인 GraphQL 스키마와 작업 파일에 맞게 조정되었습니다. 수백 KB에서 약 2MB 정도의 요청은 일반적으로 안전합니다. 매우 큰 문서는 타임아웃이나 크기 제한에 걸릴 수 있습니다.

개인정보 보호 및 안전성

GraphQL 문서는 브라우저 내에서 또는 encode64의 포맷터 백엔드에서 포맷팅됩니다. 실행되거나 제3자 서비스로 전송되지 않습니다. 민감한 스키마의 경우 Prettier를 사용하여 로컬에서 동일한 구성을 미러링할 수 있습니다.

명령줄 동등 기능 (Prettier)

Node.js와 Prettier가 이미 설치되어 있다면 로컬에서 이 동작을 재현할 수 있습니다.

Node.js (모든 플랫폼)

GraphQL 스키마 파일을 제자리에서 포맷팅

npx prettier --write schema.graphql

Prettier는 파일 확장자를 기반으로 GraphQL을 자동 감지합니다.

사용자 지정 들여쓰기 및 줄 길이로 포맷팅

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

온라인 도구에서 제공하는 들여쓰기 및 줄 바꿈 옵션을 반영합니다.

stdin에서 포맷팅 (예: 다른 도구에서 파이프된 경우)

cat input.graphql | npx prettier --stdin-filepath input.graphql

셸 스크립트, CI 파이프라인 또는 Git 훅에서 유용합니다.

일반적인 GraphQL 포맷터 사용 사례

API 스키마 개발

  • 대규모 스키마 파일을 일관되게 포맷팅하여 탐색 용이성 향상
  • 스키마 PR에서 잡음이 많은 공백 차이 줄이기
  • 코드 생성 도구를 위한 깔끔한 SDL 준비
# 이전
type User{ id:ID! name:String!}

# 이후
type User {
  id: ID!
  name: String!
}

프론트엔드 작업 및 프래그먼트

  • 여러 앱 또는 패키지 간 공유 쿼리 정규화
  • 디버깅 중 중첩 선택 항목 스캔 용이성 향상
  • 문서 스니펫 및 플레이그라운드 예제를 깔끔하게 포맷팅 유지

테스트, 픽스처 및 도구

  • 스냅샷 테스트에 사용되는 GraphQL 픽스처 표준화
  • 커밋 전 훅 또는 CI 작업에 포맷팅 통합
  • 스키마 검증 또는 차이 도구에 깔끔한 문서 제공

❓ Frequently Asked Questions

GraphQL 포맷터는 실제로 무엇을 변경하나요?

Prettier의 GraphQL 규칙(들여쓰기, 줄 바꿈, 구두점 주변 간격, 선택 항목 및 필드 레이아웃)에 따라 GraphQL 문서를 재구성합니다. 필드 이름 변경, 인수 추가 또는 스키마 의미 변경은 하지 않습니다.

작업과 스키마 SDL을 모두 지원하나요?

예. 이 포맷터는 표준 GraphQL 작업(쿼리, 뮤테이션, 서브스크립션, 프래그먼트)과 스키마 정의 언어(타입, 인터페이스, 열거형, 유니온, 입력, 지시어, 스키마 정의 및 확장)에 모두 작동합니다.

주석과 설명 문자열은 보존되나요?

예. 삼중 따옴표 설명 문자열(`"""…"""`)과 인라인 `#` 주석은 보존됩니다. 포맷터가 이를 재배치하거나 주변 공백을 조정할 수 있지만 의도적으로 제거하지는 않습니다.

내 GraphQL 코드가 실행되나요?

아니요. 이 도구는 GraphQL을 재포맷하기 위해 텍스트로 파싱하지만, 쿼리를 실행하거나 GraphQL 서버에 연결하지는 않습니다.

포맷팅은 어디서 실행되나요: 클라이언트인가요 서버인가요?

포맷터는 응답성을 위해 브라우저에서 직접 Prettier를 실행하는 것을 선호합니다. 필요한 GraphQL 플러그인을 브라우저에서 로드할 수 없는 경우, 동일한 옵션으로 서버의 Prettier 워커로 폴백합니다.

이 도구는 무료로 사용할 수 있나요?

네. 이 도구는 성능을 안정적으로 유지하기 위한 공정 사용 보호 장치와 함께 무료입니다. 무거운 작업이나 비공개 작업의 경우, 자체 환경에서 Prettier를 사용하여 동일한 구성을 미러링하세요.

Pro Tips

Best Practice

린트 추가나 호환성 변경 전에 레거시 스키마를 표준화하려면 이 포맷터를 사용하세요. 이후 diff 검토가 훨씬 쉬워집니다.

Best Practice

온라인 도구 설정(들여쓰기 크기 및 줄 길이)을 프로젝트의 Prettier 구성과 일치시켜 로컬 및 웹 포맷팅을 동일하게 유지하세요.

Best Practice

코드 내 긴 임베디드 GraphQL 문자열을 `.graphql` 파일로 추출하여 균일하게 포맷하고 재사용할 수 있도록 하세요.

Best Practice

포맷팅과 린팅(예: GraphQL ESLint)을 함께 사용하여 공백 및 줄바꿈 이상의 스키마 및 쿼리 문제를 발견하세요.

Additional Resources

GraphQL 명세서
Documentation
Prettier – GraphQL 포맷팅
Documentation
GraphQL 공식 문서 – 학습
Documentation
GraphQL ESLint (린트 규칙)
Documentation

Other Tools