プログラミング言語を整える
中級GraphQL を整える。
＝ スキーマとデータを自分で書いて、GraphQL のクエリを試す練習場
レッスン（クリックで下の3欄すべてに反映）
「▶ 実行」を押すと、ここに data と errors が JSON で出ます。
4 ステップで GraphQL の骨格をつかむ。
- 1
フィールドを選ぶ
REST の「1つのURLを叩くと決まった形が全部返ってくる」のと違い、GraphQL は
{ books { title year } }のように欲しいフィールドだけを選んで書く。選ばなかった項目は返らない。 - 2
引数で絞る
フィールドには引数を渡せる。
book(id: "2")のように書くと、対応する1件だけが返る（この練習場では data の配列から id が一致する要素を探す簡易な仕組みで再現している）。 - 3
フラグメントと別名
fragment BookFields on Book { }で「よく使うフィールドの組」を使い回せる（フラグメント）。vintage: booksのように コロンの前に名前を付けると、結果のキー名を変えられる（別名・エイリアス）。 - 4
ミューテーション
データを変更する操作は
queryではなくmutationで書く。この練習場ではaddBookを実行すると データ（JSON）のbooks配列に新しい要素を push する（簡易実装）。
💡 この練習場の resolver（フィールドの値をどう解決するか）は、あえて単純なルールに固定しています。
「Query の各フィールド名は、データ(JSON)のトップレベルのキーとそのまま対応する」「引数に
id があれば配列から1件探す」「
id 以外の引数は、全部のプロパティが一致する要素だけに絞り込む」
「addXxx 形式のミューテーションは対応する複数形の配列に push する」の4つだけです。
実際のサーバーではデータベースへの問い合わせなど、もっと自由な resolver を書けます。
書いたスキーマ・データ・クエリと実行結果は、どこにも送信されません（すべてブラウザ内で実行）。
🌐 ただし1点だけ補足します。このページを開いただけでは外部通信は発生しませんが、
「実行」を押した最初の1回だけ、GraphQL の実行環境（graphql-js 16.11.0）を配信元の
cdn.jsdelivr.net から取得します（約0.2MB）。
これはプログラムを受け取るだけの通信で、あなたが書いたスキーマ・データ・クエリや実行結果が送られることはありません。
ただし通信である以上、配信元にはお使いの回線の IP アドレスが見えます。
「入力は端末から出さない」という当サイトの原則に関わる点なので、隠さずに書いておきます。
GraphQL とは。
GraphQL は Facebook（現 Meta）が開発した、API に問い合わせるためのクエリ言語です。
クライアント（アプリやブラウザ）側が「どのフィールドが欲しいか」をクエリとして書き、サーバーはスキーマ（型定義）に
従ってその形どおりのデータを返します。1つのエンドポイント（多くの場合 /graphql）に
対してクエリを送る形が一般的です。
この練習場では、実際のサーバーの代わりに graphql-js（GraphQL の公式リファレンス実装）を ブラウザの中だけで動かし、上の DATA（JSON）を簡易的な resolver（上の「使い方」欄を参照）でデータソースの代わりに使っています。
REST との違い。
| 観点 | REST | GraphQL |
|---|---|---|
| エンドポイントの数 | リソースごとに複数（/books・/authors など） | 通常1つ（クエリの中身で問い合わせ内容を指定） |
| 返るデータの形 | サーバーが決めた固定の形（全項目が返るのが一般的） | クライアントが選んだフィールドだけ |
| 複数リソースの取得 | 複数回リクエストするか、専用エンドポイントを作る | 1回のクエリでネストして同時に取得できる |
| 型の定義 | 仕様（OpenAPI 等）は任意・別ファイル | スキーマ（SDL）が API 自体の一部として必須 |
| データの変更 | POST / PUT / PATCH / DELETE などの HTTP メソッドで表現 | すべて mutation という1種類の操作で表現 |
スキーマ（SDL）の型。
上の SCHEMA 欄で使っている書き方の一覧です。
| 書き方 | 意味 |
|---|---|
| type Book { } | オブジェクト型の定義。フィールドの一覧を中括弧の中に書く |
| title: String | スカラー型（String / Int / Float / Boolean / ID）のフィールド |
| books: [Book] | 配列（リスト）型。[ ] で囲む |
| book(id: ID): Book | 引数付きフィールド。丸括弧の中が引数の型 |
| type Query { } | 読み取り操作の入り口となる特別な型（この名前だと自動的に認識される） |
| type Mutation { } | 変更操作の入り口となる特別な型（同じく名前で自動的に認識される） |
このツールについて
GraphQL は「欲しいデータの形をクエリとして書き、その形どおりに返してもらう」ための問い合わせ言語。ブラウザ内で graphql-js が動くので、スキーマとデータを自分で用意し、書いて → 実行 → 結果を安全に何度でも試せます。
スキーマ・データ・クエリを自分で用意して、GraphQL のクエリとミューテーションを試せる練習場。サーバーは要りません。
主な機能
- ブラウザ内で graphql-js を実行（送信ゼロ）
- SCHEMA／DATA／QUERY＋VARIABLES の3欄
- 4課題（フィールド選択／引数／フラグメントと別名／ミューテーション）
- リゾルバの規約をページ上に明記
よくある質問
Q. サーバーやデータベースは必要ですか？
A. 不要です。DATA 欄に書いた JSON を簡易的なデータの置き場として使い、ブラウザ内の graphql-js がクエリを実行します。
Q. リゾルバはどんな規約で動いていますか？
A. フィールド名とデータのキーを対応させ、id 引数なら1件検索、それ以外の引数はプロパティ一致で絞り込み、addXxx 形式のミューテーションは対応する複数形の配列に追加する、という単純な規約です。ページ内にも明記しています。
Q. 本物の GraphQL サーバーと同じ書き方ができますか？
A. スキーマ（SDL）・クエリ・フラグメント・ミューテーションの書き方は同じです。リゾルバだけがこの練習場独自の簡易実装です。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
