GraphQL 포매터

사용 방법

1. GraphQL query, mutation, subscription, SDL 스키마를 입력 영역에 붙여넣거나 샘플 불러오기로 예제부터 시작하세요.
2. 형식화로 미화, 압축으로 축약, 검증으로 구문만 확인할 수 있습니다.
3. 들여쓰기는 2 / 4 공백 사이에서 전환. 기본값 2는 graphql-js 네이티브 출력과 동일합니다.
4. 복사 또는 .graphql 다운로드로 결과를 가져갈 수 있고, Cmd/Ctrl + Enter로 키보드에서 형식화할 수 있습니다.

실제 예제

형식화 전

query GetUser($id:ID!,$withPosts:Boolean!){user(id:$id){id name email posts @include(if:$withPosts){...PostSummary}}} fragment PostSummary on Post{id title publishedAt}

형식화 후

query GetUser($id: ID!, $withPosts: Boolean!) {
  user(id: $id) {
    id
    name
    email
    posts @include(if: $withPosts) {
      ...PostSummary
    }
  }
}

fragment PostSummary on Post {
  id
  title
  publishedAt
}

SDL 스키마

type Post {
  id: ID!
  title: String!
  publishedAt: DateTime
  author: User!
}

type Query {
  post(id: ID!): Post
  posts(authorId: ID, limit: Int = 20): [Post!]!
}

왜 GraphQL을 형식화해야 하나요?

일관된 GraphQL 형식은 code review, schema diff, .graphql 파일 보관에 직접적인 영향을 줍니다. persisted query를 쓸 수 없는 환경에서는 minify로 전송량을 줄일 수 있습니다. 정리된 쿼리는 PR에서 읽기 쉽고, 쿼리를 단독으로 검증하면 fragment 오타를 요청을 보내지 않고도 즉시 잡아낼 수 있습니다.

동작 원리

본 도구는 브라우저 안에서 graphql-js(GraphQL Foundation이 관리하는 공식 참조 구현)를 실행합니다. parse()가 텍스트로부터 AST를 만들고 첫 구문 오류를 줄·열로 보고합니다. print()가 AST를 표준 GraphQL로 다시 직렬화하고, stripIgnoredCharacters()가 스펙에서 ignored로 정의된 토큰을 모두 제거해 압축 형태를 만듭니다. 네트워크 왕복 없이 모든 처리가 로컬에서 끝납니다.