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 文件入库。压缩后的 query 在没有 persisted query 时能减少线上传输体积；美化后的 query 在 PR 里更易扫读。把 query 单独拿出来做校验，可以在不发请求的情况下秒级定位 fragment 拼写错误。

实现原理

本工具在浏览器中跑 graphql-js（GraphQL Foundation 维护的参考实现）。parse() 从文本构建 AST 并在首个语法错误处报出行列号；print() 把 AST 序列化为规范 GraphQL；stripIgnoredCharacters() 按 spec 移除所有 ignored token，得到压缩形式。整个过程零网络往返，数据完全留在本地。