GraphQLって何？RESTとの違いを理解しよう！

プロ太先生、最近「GraphQL」という言葉をよく聞くんですが、これって何ですか？

GraphQLは、APIを作るための新しい方法なんだ。まず、APIって何か分かる？

えーっと、アプリケーション同士がデータをやり取りするための仕組みですよね？
レストランで言えば、ウェイターさんみたいなものですよね？？

その通り！例えば、スマホのXアプリが、サーバーからツイートのデータを取得するときに使うのがAPIだね。

Contents

REST APIの問題点
GraphQLの登場！
GraphQLの特徴まとめ
まとめ

REST APIの問題点

従来は主に「REST API」というものが使われていたんだ。例えば、ユーザー情報を取得したいとき、こんな感じでリクエストを送っていた。

GET /api/users/123

シンプルですね！

でも、REST APIには問題があるんだ。例えば、ユーザーの情報と、そのユーザーが投稿した記事も一緒に取得したいとしよう。

// REST APIの場合、複数回のリクエストが必要
// 1. まずユーザー情報を取得
fetch('/api/users/123')
  .then(response => response.json())
  .then(user => {
    console.log(user); // { id: 123, name: "山田太郎", email: "yamada@example.com" }
    
    // 2. 次にそのユーザーの記事を取得
    return fetch(`/api/users/${user.id}/posts`);
  })
  .then(response => response.json())
  .then(posts => {
    console.log(posts); // [{ id: 1, title: "記事1" }, { id: 2, title: "記事2" }]
  });

あー、2回もリクエストを送らないといけないんですね。面倒そう…

そうなんだ！しかも、もしユーザー名だけ欲しい場合でも、emailやその他の不要な情報まで全部返ってきちゃう。これを「オーバーフェッチング」って言うんだ。

GraphQLの登場！

そこで登場するのがGraphQL！
GraphQLなら、1回のリクエストで必要なデータだけを取得できるんだ。

// GraphQLクエリの例
const query = `
  query {
    user(id: 123) {
      name          # 名前だけ欲しい
      posts {       # ユーザーの投稿も一緒に取得
        title       # タイトルだけ欲しい
      }
    }
  }
`;

// 1回のリクエストで全て取得
fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => {
  console.log(data);
  // 結果：
  // {
  //   "data": {
  //     "user": {
  //       "name": "山田太郎",
  //       "posts": [
  //         { "title": "記事1" },
  //         { "title": "記事2" }
  //       ]
  //     }
  //   }
  // }
});

すごい！1回で済むし、欲しいデータだけ取得できるんですね！

GraphQLの特徴まとめ

GraphQLの主な特徴をまとめるとこんな感じだよ。

1. 必要なデータだけ取得（No オーバーフェッチング）

# 名前とメールアドレスだけ欲しい場合
query {
  user(id: 123) {
    name
    email
    # ageやphoneNumberは取得しない
  }
}

2. 1回のリクエストで複数のリソース取得

# ユーザー情報、投稿、コメントを一度に取得
query {
  user(id: 123) {
    name
    posts {
      title
      comments {
        content
        author {
          name
        }
      }
    }
  }
}

3. 型安全性

# GraphQLでは型が明確に定義される
type User {
  id: ID!           # IDタイプ、必須
  name: String!     # 文字列、必須  
  age: Int          # 整数、オプショナル
  posts: [Post!]!   # Post型の配列、必須
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}