ゆめさくコード

GraphQL

luagate/graphql-introGraphQL入門20 枚Web 開発
スライド103触れる図解124レッスンの導入6

上から下へ、全 20 枚そのまま並べています。

発表モードで開く

GraphQL入門

GraphQL

欲しいデータだけを取りに行くAPIの形

1
1

目次

今日の流れ

1. GraphQLって何のためにあるの？

2. RESTで困ること

3. クエリ — 欲しい形で取得する

4. ミューテーション と スキーマ

5. まとめと振り返り

2
2
GraphQL入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • GraphQLが「必要なデータだけ取る仕組み」だと分かる
  • RESTで起きがちな困りごとを説明できる
  • クエリで欲しい項目を指定する感覚をつかむ
  • ミューテーションが書き込み用だと分かる
  • RESTとの使い分けをイメージできる
10
3
GraphQL入門 - イントロ

GraphQL とは

クライアントが「欲しいデータの形」を指定して取りに行くAPIの仕組みです。

GraphQL（グラフキューエル）

1つの窓口に対して「どの項目が欲しいか」を問い合わせ文（クエリ）で指定し、必要なデータだけを受け取れるAPIの仕組みやクエリ言語。

・欲しい項目を自分で指定できる

・エンドポイントは基本1つだけ

・必要なデータをまとめて1回で取れる

・RESTとは別の設計思想のAPI

11
4
GraphQL入門 - イントロ

GraphQL ＝ 必要な料理だけ頼める注文

決まったセットではなく、欲しいものだけを指定して頼むイメージです。

あなた（クライアント）
  • 「名前とメールだけ欲しい」
  • 欲しい項目を自分で選ぶ
クエリ（注文票）
  • 欲しい形をそのまま書く
  • 余計なものは頼まない
サーバー
  • 頼まれた項目だけ返す
  • ぴったりの形で応える
12
5

GraphQL入門 - RESTの課題

2

第2部 RESTで困ること

なぜGraphQLが生まれたか

20
6
GraphQL入門 - RESTの課題

RESTでありがちな2つの悩み

RESTは分かりやすい反面、データの取り方でこんな悩みが出ることがあります。

取りすぎ（オーバーフェッチ）

  • 名前だけ欲しいのに全項目が返る
  • 使わないデータまで受け取る
  • 通信量が無駄に増える
  • モバイルだと特に困る

足りない（アンダーフェッチ）

  • 1回では欲しい情報がそろわない
  • ユーザー → 投稿 → コメントと何度も呼ぶ
  • リクエストの往復が増える
  • 表示が遅くなりがち
21
7
GraphQL入門 - RESTの課題

REST と GraphQL の取り方

・同じ「ユーザーと投稿が欲しい」でも、呼び方が大きく変わります。

REST（複数回呼ぶ）

  • GET /users/1 でユーザー取得
  • GET /users/1/posts で投稿取得
  • 必要なら更にコメントも取得
  • 往復が増えがち
  • 余分な項目も付いてくる

GraphQL（1回で取る）

  • 1つのクエリにまとめて書く
  • ユーザーと投稿を一度に取得
  • 欲しい項目だけ指定できる
  • 往復が1回で済む
  • 返ってくる形も指定どおり
22
8

GraphQL入門 - クエリ

3

第3部 クエリ

欲しい形で取得する

30
9
GraphQL入門 - クエリ

クエリ — 欲しい項目を書く

・「どの項目が欲しいか」をそのまま書きます。書いた形のとおりに返ってきます。

graphql
# IDが1のユーザーの、名前と投稿タイトルだけ欲しい
query {
  user(id: 1) {
    name
    posts {
      title
    }
  }
}
31
10
GraphQL入門 - クエリ

返ってくるデータ

・クエリで指定した形と、返ってくるJSONの形がそろっているのが特徴です。余計な項目は入りません。

json
{
  "data": {
    "user": {
      "name": "田中 太郎",
      "posts": [
        { "title": "はじめての投稿" },
        { "title": "GraphQLを学ぶ" }
      ]
    }
  }
}
32
11
GraphQL入門 - クエリ

ミューテーション（書き込み用）

データを取るのがクエリ、データを変えるのがミューテーションです。

Mutation（ミューテーション）

データの作成・更新・削除など「変化を起こす」ための操作。クエリが読み取り専門なのに対し、書き込みはミューテーションで行う。

・新規作成・更新・削除に使う

・RESTのPOST/PUT/DELETEに相当する役割

・変更後にどの項目を返すかも指定できる

・クエリと書き方は似ている

33
12
GraphQL入門 - クエリ

ミューテーションの例

・ユーザーを新しく作り、作成後に欲しい項目だけ返してもらう例です。

graphql
# ユーザーを作成し、idと名前を返してもらう
mutation {
  createUser(name: "佐藤 花子", email: "hanako@example.com") {
    id
    name
  }
}
34
13

GraphQL入門 - スキーマ

4

第4部 スキーマと使い分け

型で守られた窓口

40
14
GraphQL入門 - スキーマ

スキーマ（取り決めの設計図）

どんなデータがあり、どう問い合わせられるかを型で定義したものです。

スキーマ（Schema）

GraphQL APIで扱えるデータの種類と、その項目・型をあらかじめ定義した設計図。クライアントとサーバーの間の約束ごとになる。

・どの項目が取れるかが型で決まっている

・存在しない項目を頼むとエラーで気づける

・ツールが補完や検証をしてくれる

・ドキュメント代わりにもなる

41
15
GraphQL入門 - スキーマ

REST と GraphQL の使い分け

どちらが優れているというより、向き不向きで選びます。

REST が向く
GraphQL が向く

データの形

シンプルで決まっている

複雑で関連が多い

取り方

決まった単位で取れば十分

必要な項目を細かく選びたい

呼び出し

1種類ずつで足りる

1回でまとめて取りたい

42
16
GraphQL入門 - まとめ
クイズ

振り返りクイズ

今日の内容を確認しましょう。

GraphQLの大きな特徴として、最も適切なものはどれ？

A
エンドポイントがリソースごとに増える
B
クライアントが欲しい項目を指定して取れる
C
必ず通信が暗号化される
D
データベースが不要になる
50
17
GraphQL入門 - まとめ
答え

振り返りクイズ 解答

GraphQLの大きな特徴として、最も適切なものはどれ？

A
エンドポイントがリソースごとに増える
B
クライアントが欲しい項目を指定して取れる
C
必ず通信が暗号化される
D
データベースが不要になる

GraphQLはクライアントがクエリで「欲しい項目」を指定し、その形のとおりに受け取れるのが最大の特徴です。エンドポイントは基本1つで、取りすぎ・足りないを防げます。暗号化やDB不要とは別の話です。

51
18
GraphQL入門 - まとめ

質疑・次回予告

今日のまとめと、次に学ぶテーマです。質問があればここで受け付けます。

今日のおさらい
  • GraphQLは欲しいデータだけ取れる
  • クエリで取得、ミューテーションで変更
  • スキーマという型の約束がある
次回予告
  • WebSocket 〜リアルタイム双方向通信〜
  • つなぎっぱなしで即やり取りするしくみ
52
19
"

GraphQLは「欲しいデータの形を自分で書いて、その通りに受け取る」API。取りすぎず、足りなくならない。RESTと使い分ければ、データ取得の悩みの多くがほどけます。

— GraphQL入門

53
20