Zenn
🔮

RESTとGraphQLの比較

2024/12/20に公開
GraphQL
rest
tech

1. RESTの特徴

特徴

  • リソースベース: URL（エンドポイント）ごとに特定のリソース（例: ユーザー、商品）を扱います。
  • HTTPメソッド: データ操作には、GET、POST、PUT、DELETEなどの標準メソッドを使用します。
  • 固定されたレスポンス: クライアントはリソース全体または定義済みの部分を取得しますが、不要なデータも含まれることがあります。

RESTの例

エンドポイント:

  • GET /users: すべてのユーザーを取得。
  • GET /users/1: IDが1のユーザーを取得。
  • POST /users: 新しいユーザーを作成。

実装例（JavaScriptでAPIリクエスト）

// ユーザー一覧を取得する
fetch("https://example.com/api/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

// 新しいユーザーを作成する
fetch("https://example.com/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "Alice", age: 25 })
})
  .then(response => response.json())
  .then(data => console.log("User created:", data))
  .catch(error => console.error("Error:", error));

2. GraphQLの特徴

特徴

  • クエリベース: 必要なデータだけを柔軟に取得できます。
  • 単一のエンドポイント: 通常、/graphql の1つのエンドポイントだけで処理します。
  • 型システム: サーバーはデータの構造（スキーマ）を定義し、クライアントがそれに基づいてクエリを送ります。

GraphQLの例

クエリ
query {
  user(id: 1) {
    name
    age
  }
}

実装例（JavaScriptでGraphQLリクエスト）

const query = `
  query {
    user(id: 1) {
      name
      age
    }
  }
`;

fetch("https://example.com/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ query })
})
  .then(response => response.json())
  .then(data => console.log(data.data))
  .catch(error => console.error("Error:", error));

RESTとGraphQLの違いを比較

特徴 REST GraphQL
エンドポイント 複数（例: /users, /posts） 単一（例: /graphql）
データ量 不要なデータも含まれることがある 必要なデータだけを取得できる
柔軟性 固定的なレスポンス クライアント側でクエリをカスタマイズ
学習コスト 比較的簡単 初期設定やスキーマ定義が必要

簡単な例で考える

RESTの場合

  • クライアント: 「ユーザーの名前と年齢が欲しい」
  • レスポンス: サーバーは/users/1から全データを返す。

GraphQLの場合

  • クライアント: 「ユーザーの名前と年齢だけ欲しい」
  • レスポンス: 必要なデータだけ返す（無駄が少ない）。

REST（Representational State Transfer）とGraphQLは、どちらもサーバーとクライアント間でデータをやり取りするための仕組みですが、アプローチが異なります。
RESTはシンプルで導入しやすく、GraphQLは柔軟性が高いので複雑な要件に適しています。

参考

https://hasura.io/learn/ja/graphql/intro-graphql/graphql-vs-rest/

Discussion