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 の整形は、コードレビュー、スキーマ diff、.graphql ファイルの保管に直結します。永続化クエリを使えない環境では minify によって通信量を減らせます。整形されたクエリは PR 上で読みやすく、クエリを単体で検証することで fragment 名のタイプミスをリクエストを送る前に発見できます。

内部の仕組み

本ツールはブラウザ内で graphql-js（GraphQL Foundation 管理の公式リファレンス実装）を動かします。parse() がテキストから AST を構築し、最初の構文エラーを行・列で報告。print() が AST を規範的な GraphQL に再シリアライズ。stripIgnoredCharacters() が spec で ignored とされるトークンをすべて除去して圧縮版を返します。ネットワーク往復ゼロ、データは端末内に留まります。