入力

出力

GraphQL から JSON サンプルツールとは？

テストスイートで GraphQL API をモックするとなると、たいていは型ごとにダミーデータを手書きすることになる — 退屈で壊れやすく、スキーマは 1〜2 スプリントでフィクスチャから乖離していく。このページはあなたの GraphQL スキーマ定義言語を読み取り、それに合致する JSON ドキュメントを生成する。SDL を左に貼り付けると、右ペインに値が入った JSON オブジェクトが返ってくる：Query 型のすべてのフィールドが埋まり、リストには 2 要素、enum は最初の値に設定され、DateTime や URL のようなカスタムスカラーは適切なデフォルトにマッピングされる。

パーサ依存はページに読み込まれていない — SDL ウォーカーは手書きで約 600 行、実際のスキーマに登場するすべての構文をカバーする：type, interface, union, enum, input, scalar、リストと non-null 修飾子、自己参照型まで。出力は RFC 8259 準拠の素の JSON、2 スペースインデント、fetch モックや Postman のサンプルレスポンスにそのまま貼れる状態。email, name, phone, currency, status という名前のフィールドにはそれっぽいサンプル値が入り、それ以外は汎用の "sample text" にフォールバックする。

すべての処理はあなたのブラウザ内で行われる。スキーマがページから出ることはなく、ネットワーク呼び出しもなく、変換は瞬時。

GraphQL から JSON サンプルツールの使い方

3 ステップだけ。下で説明するボタンはこのページの実際のボタン。

貼り付け、アップロード、またはサンプル読み込み

左の入力パネルに GraphQL スキーマを貼り付け — 入力を止めてから約 0.3 秒で自動変換されるので、変換ボタンはない。.graphql や .gql ファイルを使うなら アップロード をクリック、または サンプル を押すと現実的な EC の Order スキーマがロードされる。典型的な入力はこんな感じ：

type Query { order(id: ID!): Order } type Order { id: ID! customer: Customer! items: [OrderItem!]! total: Money! status: OrderStatus! placedAt: DateTime! }

サーバ風のスキーマ（type Query { ... } 付き）も単独の型ファイルも動く。ウォーカーは Query があればそれをルートにし、なければ最初のオブジェクト型を選ぶ。受け付ける形は graphql-js のようなツールが起動時にパースする形と一致する。

JSON 出力を読む

右の出力パネルが JSON サンプルを 2 スペースインデントでレンダリングする。オブジェクト型はオブジェクトに。リストは 2 要素の配列に。enum は最初の値が文字列として入る。カスタムスカラーは適切なデフォルトに — DateTime は ISO-8601 タイムスタンプ、URL は "https://example.com/..."、JSON は {}。自己参照型（type Person { friends: [Person!]! }）は深さ 4 で打ち切られ null で切り上げられるので、ページが固まることはない。

コピーまたはダウンロード

フィクスチャファイル、モックサーバ、fetch スタブ用に JSON が欲しければ コピー を。sample.json として保存するなら ダウンロード を。入力パネルのクリアボタンで空の状態に戻る。変換は完全にクライアント側で行われる — スキーマがページから出ることはない。

実際にこれを使う場面

モック GraphQL サーバのフィクスチャ

json-graphql-server や Apollo Server のモックでモックバックエンドを立ち上げていて、スキーマの形に沿った最初の JSON ファイルが必要。SDL を貼り付け、出力をコピーすれば 80% は終わり — 名前と ID を調整してフィクスチャを出荷。

Postman / Insomnia のサンプルレスポンス

Postman や Insomnia で GraphQL エンドポイントをドキュメント化するということは、操作ごとにサンプルレスポンス本文を埋めるということ。型から JSON の形を生成し、サンプルに貼り付けて、テストケースに合わせて値を編集。ネストされたオブジェクトをゼロから手書きするより断然マシ。

フロントエンドの型ドラフト

バックエンドが新しい GraphQL 型を出すと、フロントエンドはエンドポイントが本物になる前に UI を組むためのサンプルペイロードが欲しいことが多い。スキーマを JSON に変換してフィクスチャに突っ込み、フィクスチャに対してコンポーネントを組む。API が準備できたらライブデータに切り替える。

スキーマ探索

300 行の SDL を読むのも悪くないが、実際のレスポンスがどう見えるかを見るほうが早い。JSON サンプルがスキーマを具体化する — どのフィールドがネストされ、どれが配列で、enum がどこにあるかが即座に分かる。サービスに新しく入ったエンジニアのオンボーディング補助として有用。

よくある質問

実際のサーバに対してクエリを実行しますか？

いいえ。ページはスキーマの形に合致するサンプルドキュメントを生成するだけです。ネットワーク呼び出しはありません。実際の GraphQL エンドポイントを叩く必要があれば GraphiQL や任意の GraphQL クライアントを使ってください。

自己参照型が数レベルで止まるのはなぜですか？

深さ 4 で再帰が打ち切られます。type Person { friends: [Person!]! } のようなスキーマは、そうしないと無限にネストされたオブジェクトを生成してしまいます。打ち切り後は値が null になり、JSON は有限で整形可能なまま保たれます。

どのルート型が使われますか？

まず type Query を探します。なければスキーマで定義された最初のオブジェクト型を選びます（input 型はスキップ）。SDL を並べ替えれば任意の型をトップに持ってこられます。

カスタムスカラーは扱えますか？

はい。よく使われるもの（DateTime, Date, Time, URL, Email, JSON, BigInt）には適切なデフォルトが組み込まれています。それ以外は汎用のプレースホルダ文字列にフォールバックします。スカラーを特定の値にマッピングしたい場合は出力を手で編集してください — ただの JSON です。

JSON は私のスキーマに対して有効ですか？

形は有効です：すべての必須フィールドが埋まり、型は宣言されたスカラー/オブジェクト/リストと一致し、enum は実在する enum 値を使います。意味的には有効ではありません（email は本物のメールではなく、order ID は本物の ID ではない）。フィクスチャの出発点として使い、テストの代わりにはしないでください。

スキーマはサーバに送信されますか？

いいえ。変換は完全にブラウザ内で実行されます。何もアップロードされず、何もログに残りません。社内スキーマや未公開スキーマを貼り付けても安全です。

その他の GraphQL と JSON ツール

サンプル生成は GraphQL ワークフローの一部にすぎない。これらのツールが残りをカバーする：