はじめに
先日、実務で初めて触れたGraphQLについて、キャッチアップした内容をまとめておきます！
目次
🧷 GraphQLとは？
GraphQLは「APIのクエリ言語（Query Language）」です。
簡単に言うと、「欲しいデータだけを指定して取得できる仕組み」
普通のAPI（REST API）だと、サーバーが決めたデータがそのまま返ってくるけど、GraphQLならクライアント（フロントエンド）が「このデータだけ欲しい！」と細かく指定できる。
🧷 なぜ開発されたのか？
2012年に主に3つの理由からFacebookが開発！
1. オーバーフェッチ（不要なデータが多すぎる）
REST APIだと「全部入りのデータ」が返ってくることが多い。
でも、スマホアプリとかだと「一部のデータだけ欲しい」のに、無駄にデータを取ることになってしまう。
2. アンダーフェッチ（欲しいデータが足りない）
例えば「ユーザー情報＋その投稿一覧」が欲しいとき、REST APIだと「ユーザー情報API → 投稿一覧API」と2回リクエストすることが多い。
3. エンドポイントが増えすぎる
REST APIは「ユーザー情報用」「投稿一覧用」など、用途ごとにAPIを作るから、エンドポイントがその分増える。
💡 GraphQLなら「/graphql」みたいに1つのエンドポイントだけでOK！
🧷 REST APIとの違い
| 比較項目 | REST API | GraphQL |
|---|---|---|
| データ取得 | 決められた形のデータが返る | 必要なデータだけ指定できる |
| エンドポイント数 | 用途ごとに増える | 1つでOK |
| オーバーフェッチ | あり（不要なデータも取得） | なし（欲しいデータだけ取得） |
| アンダーフェッチ | あり（複数APIを呼ぶ必要あり） | なし（1回のリクエストでOK） |
🧷 Query、Mutation、Subscriptionって何???
GraphQLには3つの主要な操作がある！
1. Query（データ取得）
例えば「ユーザーの名前とメールアドレスが欲しい！」
query {
user(id: 1) {
name
email
}
}
💡 必要なデータだけ取れる！
2. Mutation（データ更新・作成・削除）
例えば「新しい投稿を作成する」
mutation {
createPost(title: "GraphQL最高！", content: "RESTより便利") {
id
title
}
}
💡 データを変更するリクエスト
3. Subscription（リアルタイム更新）
WebSocketを使って、データの更新をリアルタイムに取得できる
例えば「新しいコメントが投稿されたら即座に通知」
subscription {
newComment(postId: 1) {
id
content
author {
name
}
}
}
💡 チャットアプリや通知系の機能でめっちゃ便利！
🧷 実際の導入事例
GraphQLはめっちゃ多くの企業で使われてる！
- X → モバイルアプリのデータ取得で活用
- GitHub → GitHub API v4はGraphQLベース
- Shopify → eコマースのAPIとしてGraphQLを採用
- Twitter → 一部の内部APIでGraphQLを活用
- Netflix → ユーザーごとにカスタムデータを取得するために使用
🎉 まとめ
- GraphQLは「無駄のないデータ操作(取得・更新)ができるAPIクエリ言語」
- 特に以下が超便利ポイント🏳️🌈
- オーバーフェッチ・アンダーフェッチを解決
- エンドポイントを1つに統一
- リアルタイム更新が簡単