GraphQL フォーマッター オンライン

クエリ・ミューテーション・SDL スキーマを整形・圧縮・検証する GraphQL フォーマッター。

GraphQL のクエリ・スキーマ・変数はブラウザ内のローカルで処理され、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

リクエストボディを整えたいですか? JSON Formatter を試してください。

GraphQL フォーマッター について

この GraphQL フォーマッターは、GraphQL のクエリ・ミューテーション・SDL スキーマを整形・圧縮しつつ、各ドキュメントが正しくパースされるかをチェックします。生のクエリを貼り付けると、graphql 整形ツールがフィールド・引数・選択セットを一貫してインデントします。圧縮に切り替えれば空白・カンマ・コメントを除去して最小の等価ドキュメントにします。名前付きオペレーションを抽出し、添付された変数 JSON オブジェクトを整形するので、リクエスト全体を一つの場所で整え、手軽な graphql バリデーターとしても使えます。API 呼び出しをデバッグするフロントエンド・バックエンド開発者、QA エンジニアなど、共有前に graphql クエリを整形したり graphql スキーマを整えたりしたい人向けに作られています。すべてはブラウザ内のローカルで動作するため、データが端末から外に出ることも、サーバーにアップロードされることもありません。

機能

• クエリ・ミューテーション・SDL スキーマをクリーンで一貫したインデントで整形
• 空白・カンマ・コメントを除去してドキュメントを圧縮
• 構文を検証し、不正なクエリで明確なパースエラーを表示
• 貼り付けたドキュメントから名前付きオペレーションを抽出して一覧表示
• 添付された変数 JSON オブジェクトをクエリとともに整形
• ワンクリックで Format と Minify モードを切り替え
• 整形済み・圧縮済み出力を即座にコピー

GraphQL フォーマッター の使い方

1. 入力欄に GraphQL のクエリ・ミューテーション・スキーマを貼り付けます。
2. 整形には Format、圧縮には Minify を選びます。
3. 必要なら変数 JSON オブジェクトを貼り付けて整形します。
4. 抽出されたオペレーション名や構文エラーを確認します。
5. 出力パネルから整形済み・圧縮済み結果をコピーします。

例

入力

query Hero($ep:Episode){hero(episode:$ep){name friends{name}}}

出力

query Hero($ep: Episode) {
  hero(episode: $ep) {
    name
    friends {
      name
    }
  }
}

Format モードがコンパクトなクエリをインデントされた GraphQL に整形。

よくあるエラーとトラブルシューティング

• 貼り付け後に構文エラーが表示される。 — ドキュメントは有効な GraphQL である必要があります。中括弧の不一致、欠落したフィールド選択、余計なカンマがないか確認してから再整形してください。
• オペレーション名パネルに名前付きオペレーションがないと表示される。 — 匿名クエリと SDL スキーマにはオペレーション名がありません。一覧に表示したい場合は query GetUser { ... } のように名前を付けてください。
• 変数欄が無効な JSON と報告する。 — 変数欄は GraphQL 構文ではなく { "id": "1000" } のような JSON オブジェクトを想定しています。ダブルクォートのキーと有効な JSON を使ってください。
• API に対するスキーマ検証を期待している。 — このツールは構文のみを検証します。ドキュメントがパースされることは確認しますが、特定のスキーマに対してフィールドをチェックすることはありません。

よくある質問

GraphQL フォーマッターとは何ですか?

GraphQL フォーマッターは、GraphQL のクエリ・ミューテーション・SDL スキーマを整形・圧縮・構文チェックし、名前付きオペレーションを抽出します。すべてブラウザ内で行われます。

このツールで GraphQL クエリを整形するには?

クエリ・ミューテーション・スキーマを入力欄に貼り付けて Format を選びます。GraphQL フォーマッターがフィールド・引数・選択セットを再インデントし、きれいな結果をコピーできます。

GraphQL フォーマッターは私のスキーマに対して検証しますか?

構文を検証し、クエリやスキーマがパースされることを確認します。特定のスキーマ定義に対してオペレーションをチェックすることはありません。

圧縮オプションは何をしますか?

圧縮は、空白・カンマ・コメントなどの無視される文字を除去し、最小の等価 GraphQL ドキュメントを生成します。

GraphQL フォーマッターは変数も整形できますか?

はい。変数 JSON オブジェクトを専用の欄に貼り付けると、クエリとともに整形されます。

私の GraphQL クエリはどこかにアップロードされますか?

いいえ。GraphQL フォーマッターはすべてをブラウザ内のローカルで処理するため、クエリ・スキーマ・変数が端末から外に出ることはありません。

関連ツール

• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• JS / TS フォーマッター — JavaScript・TypeScript・JSX/TSX を Prettier のオプションで整形。素の JavaScript は圧縮もできます。
• MongoDB クエリフォーマッター — MongoDBシェルのクエリと集約パイプラインを整形します。
• YAML ↔ JSON — YAMLをJSONに、またその逆に変換します。
• cURL から Fetch — curlコマンドを JavaScript の fetch() 呼び出しに変換します。
• URL パーサー — URLを各パーツに分解し、クエリパラメータを一覧表示します。

コードフォーマッターの他のツール

• Dockerfile フォーマッター — Dockerfileを整形し、ベストプラクティスやlintの提案を表示します。
• MongoDB クエリフォーマッター — MongoDBシェルのクエリと集約パイプラインを整形します。
• コントラストチェッカー — 2色間のWCAGコントラスト比とAA/AAA合格を確認します。
• Mermaid 図レンダラー — Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• MongoDB クエリ整形ツール — MongoDB のクエリや find() 文をブラウザ内で整形・インデントします。
• MongoDB 集計整形ツール — MongoDB の集計パイプラインをブラウザ内で整形・インデントします。
• MongoDB エクスプローラー — MongoDB のドキュメントやコレクションのサンプルを調べ、フィールドのスキーマと型を推測します。
• OpenAPI / Swagger フォーマッター — OpenAPI / Swagger 仕様（JSON または YAML）を整形・検証し、パスと操作の数を数えます。
• CSS単位変換ツール — px・rem・em・pt・% をリアルタイムに相互変換します。
• glob to regex 変換ツール — globパターンをJavaScriptのregexに変換し、パスでテストできます。
• HTML to Markdown 変換ツール — HTMLをきれいで読みやすいMarkdownに変換します。

コードフォーマッターのツールをすべて見る (32) · すべてのツール