【ぐらふきゅーえる】

GraphQL とは?

💡 必要なデータを「ピンポイントで」取得するAPI
📌 このページのポイント
GraphQL と REST API の比較 REST API クライアント GET /users GET /posts GET /comments 3回の リクエスト オーバーフェッチ問題 レスポンス全体 必要 不要 不要なデータも 取得してしまう エンドポイントごとに固定の レスポンス形式 GraphQL クライアント POST /graphql 1つのエンドポイント クエリ(要求) {'{'} user {'{'} name email {'}'} {'}'} レスポンス {'{'} "name": "Ken" "email": "..." {'}'} ✓ 必要なデータだけ取得 ✓ 1回のリクエストで完結 ✓ クライアントが形式を決定
GraphQLとREST APIの比較
ひよこ ひよこ

REST APIと何が違うの?

ペンギン先生 ペンギン先生

REST APIは「/users/1」「/users/1/posts」のようにエンドポイントごとに決まったデータが返る。GraphQLは1つのエンドポイントに「ユーザー名と投稿タイトルだけください」とクエリを送れば、まさにそのデータだけが返る。スマホアプリのように帯域が限られる環境で特に有効だよ

ひよこ ひよこ

どんなときにGraphQLを選ぶ?

ペンギン先生 ペンギン先生

①複数のリソースを1回のリクエストで取得したい、②フロントエンドバックエンドの変更を待たずに開発を進めたい、③モバイルアプリでデータ転送量を最小化したい。逆にシンプルなCRUD APIならRESTで十分。「全てGraphQL」にする必要はなく、適材適所だよ

ひよこ ひよこ

スキーマって何?

ペンギン先生 ペンギン先生

GraphQLのAPIで取得できるデータの型定義だよ。「type User { id: ID!, name: String!, posts: [Post!] }」のように書く。スキーマがあることでフロントエンドバックエンドの「契約」が明確になり、型安全な開発ができる。スキーマからTypeScriptの型を自動生成するツール(GraphQL Code Generator)も便利だね

ひよこ ひよこ

N+1問題って何?

ペンギン先生 ペンギン先生

GraphQLの代表的なパフォーマンス問題だよ。「ユーザー一覧とそれぞれの投稿」を取得すると、ユーザー1回+投稿N回のDBクエリが発生する。DataLoader(バッチ処理でDBクエリをまとめる)で解決するのが定石。GraphQLを導入する際は必ずDataLoaderとクエリの複雑さ制限を実装しようね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「GraphQL」って出てきたら「必要なデータだけをクエリで取得できるAPI」と思えればだいたいOK!
📖 おまけ:英語の意味
「GraphQL(Graph Query Language)」 = グラフクエリ言語
💬 データの関連性をGraph(グラフ)として捉え、Query Language(問い合わせ言語)で取得するよ
← 用語集にもどる