GraphQLとREST

投稿日: 2022-11-01 2022-11-01
タグ: GraphQL, REST, web services

1. 概要

アプリケーションをサポートするWebサービスを作成する場合、通信のパターンとしてRESTまたはGraphQLを使用することを選択できます。どちらもJSONoverHTTPを使用する可能性が最も高いですが、長所と短所が異なります。

このチュートリアルでは、GraphQLとRESTを比較します。製品データベースの例を作成し、同じクライアント操作を実行したときに2つのソリューションがどのように異なるかを比較します。

2. サービス例

サンプルサービスでは、次のことが可能になります。

ドラフトステータスの製品を作成する
製品の詳細を更新する
製品のリストを取得する
単一の製品の詳細とその注文を取得する

まず、RESTを使用してアプリケーションを作成しましょう。

3. 休み

REST（Representational State Transfer）は、分散型ハイパーメディアシステム用のアーキテクチャスタイルです。 RESTのプライマリデータ要素はResourceと呼ばれます。この例では、リソースは「product」です。

3.1. 製品を作成する

製品を作成するには、APIでPOSTメソッドを使用します。

curl -X POST -H "Content-Type:application/json" -d '
{
  "name": "Watch",
  "description": "Special Swiss Watch",
  "status": "Draft",
  "currency": "USD",
  "price": null,
  "image_url": null,
  "video_url": null,
  "stock": null,
  "average_rating": null
}' https://graphqlvsrest.com/product

その結果、システムは新しい製品を作成します。

3.2. 製品の更新

RESTでは、従来、PUTメソッドを使用して製品を更新していました。

curl -X PUT -H "Content-Type:application/json" -d '
{
  "name": "Watch",
  "description": "Special Swiss Watch",
  "status": "Draft",
  "currency": "USD",
  "price": 1200.0,
  "image_url": ["https://graphqlvsrest.com/imageurl/product-id"],
  "video_url": ["https://graphqlvsrest.com/videourl/product-id"],
  "stock": 10,
  "average_rating": 0.0
}' 
https://graphqlvsrest.com/product/{product-id}

その結果、{product-id}オブジェクトが更新されます。

3.3. 製品リストを取得する

商品の一覧表示は通常、 GET 操作であり、クエリ文字列を使用してページネーションを指定できます。

curl -X GET https://graphqlvsrest.com/product?size=10&page=0

最初の応答オブジェクトは次のとおりです。

{
  "id": 1,
  "name": "T-Shirt",
  "description": "Special beach T-Shirt",
  "status": Published,
  "currency": "USD",
  "price": 30.0,
  "image_url": ["https://graphqlvsrest.com/imageurl/1"], 
  "video_url": ["https://graphqlvsrest.com/videourl/1"], 
  "stock": 10, 
  "average_rating": 3.5 
}

3.4. 注文で単一の製品を入手する

製品とその注文を取得するには、通常、以前のAPIを使用して製品のリストを取得してから、 orde r リソースを呼び出して、関連する注文を検索します。

curl -X GET https://graphqlvsrest.com/order?product-id=1

最初の応答オブジェクトは次のとおりです。

{
  "id": 1,
  "product_id": 1,
  "customer_uuid": "de68a771-2fcc-4e6b-a05d-e30a8dd0d756",
  "status": "Delivered",
  "address": "43-F 12th Street",
  "creation_date": "Mon Jan 17 01:00:18 GST 2022"
}

product-id で注文をクエリしているので、GET操作のクエリパラメーターとしてidを指定するのが理にかなっています。ただし、すべての製品をフェッチするための元の操作に加えて、関心のある製品ごとにこの操作を1回実行する必要があることに注意してください。これは、 N + 1 SelectProblemに関連しています。

4. GraphQL

GraphQL は、既存のデータサービスを使用してこれらのクエリを実行するためのランタイムが付属するAPIのクエリ言語です。

GraphQLの構成要素は、クエリとミューテーションです。クエリはデータのフェッチを担当し、ミューテーションは作成と更新に使用されます。

クエリとミューテーションの両方がスキーマを定義します。スキーマは、可能なクライアントの要求と応答を定義します。

GraphQLServerを使用して例を再実装しましょう。

4.1. 製品を作成する

saveProductという名前のミューテーションを使用してみましょう。

curl -X POST -H "Content-Type:application/json" -d'
{
  "query": "mutation {saveProduct (
    product: {
      name: \"Bed-Side Lamp\",
      price: 24.0,
      status: \"Draft\",
      currency: \"USD\"
    }){ id name currency price status}
  }"
}'
https://graphqlvsrest.com/graphql

このsaveProduct関数では、丸括弧内のすべてが入力タイプスキーマです。この後の中括弧は、サーバーから返されるフィールドを示しています。

ミューテーションを実行するとき、選択したフィールドでの応答を期待する必要があります。

{
  "data": {
    "saveProduct": {
      "id": "12",
      "name": "Bed-Side Lamp",
      "currency": "USD",
      "price": 24.0,
      "status": "Draft"
    }
  }
}

このリクエストは、RESTバージョンで行ったPOSTリクエストと非常によく似ていますが、レスポンスを少しカスタマイズできるようになりました。

4.2. 製品の更新

同様に、 updateProduct という名前の別のミューテーションを使用して、製品を変更できます。

curl -X POST -H "Content-Type:application/json" -d'
{
  "query": "mutation {updateProduct (id:12
    product: {
      price: 14.0,
      status: \"Publish\"
   }){ id name currency price, status}
  }"
}'
https://graphqlvsrest.com/graphql

応答で選択したフィールドを受け取ります。

{
  "data": {
    "updateProduct": {
      "id": "12",
      "name": "Bed-Side Lamp",
      "currency": "USD",
      "price": 14.0,
      "status": "Published"
    }
  }
}

ご覧のとおり、GraphQLは応答の形式に柔軟性を提供します。

4.3. 製品リストを取得する

サーバーからデータをフェッチするために、クエリを使用します。

curl -X POST -H "Content-Type:application/json" -d
'{
    "query": "query {products(size:10,page:0){ id name status}}"
}'
https://graphqlvsrest.com/graphql

ここでは、表示したい結果のページについても説明しました。

{
  "data": {
    "products": [
      {
        "id": "1",
        "name": "T-Shirt",
        "status": "Published"
      },...
    ]
  }
}

4.4. 注文で単一の製品を入手する

GraphQLを使用すると、GraphQLサーバーに製品と注文を結合するように依頼できます。

curl -X POST -H "Content-Type:application/json" -d 
'{
    "query": "query {product(id:1){ id name orders{customer_uuid address status creation_date}}}"
}'
https://graphqlvsrest.com/graphql

このクエリでは、idが1に等しい製品とその注文をフェッチします。これにより、1回の操作でリクエストを行うことができます。レスポンスを確認してみましょう。

{
  "data": {
    "product": {
      "id": "1",
      "name": "T-Shirt",
      "orders": [
        {
          "customer_uuid": "de68a771-2fcc-4e6b-a05d-e30a8dd0d756",
          "status": "Delivered",
          "address": "43-F 12th Street",
          "creation_date": "Mon Jan 17 01:00:18 GST 2022"
        }, ...
      ]
    }
  }
}

ここに表示されているように、応答には製品の詳細とそれぞれの注文が含まれています。

RESTでこれを実現するには、いくつかのリクエストを送信する必要がありました。1つ目は製品を取得し、2つ目はそれぞれの注文を取得します。

5. 比較

これらの例は、GraphQLを使用することで、クライアントとサーバー間のトラフィック量を削減し、クライアントが応答のフォーマット規則を提供できるようにする方法を示しています。

これらのAPIの背後にあるデータソースは、データを変更またはフェッチするために同じ操作を実行する必要がある場合がありますが、クライアントとサーバー間のインターフェイスが豊富なため、クライアントはGraphQLでの作業を減らすことができます。

2つのアプローチをさらに比較してみましょう。

5.1. 柔軟でダイナミック

GraphQLを使用すると、柔軟で動的なクエリが可能になります。

クライアント側のアプリケーションは、必要なフィールドのみを要求できます
エイリアスを使用して、カスタムキーでフィールドをリクエストできます
クライアントはクエリを使用して結果の順序を管理できます
従うべき応答オブジェクトの構造の単一バージョンがないため、クライアントはAPIの変更からより適切に分離できます。

5.2. 安価な操作

すべてのサーバー要求には、ラウンドトリップ時間とペイロードサイズの代償があります。

RESTでは、必要な機能を実現するために複数のリクエストを送信してしまう可能性があります。これらの複数のリクエストは、コストのかかる操作になります。また、応答ペイロードには、クライアント側のアプリケーションでは必要とされない可能性のある不要なデータが含まれている場合があります。

GraphQLは、コストのかかる操作を回避する傾向があります。 GraphQL を使用すると、1回のリクエストで必要なすべてのデータをフェッチできることがよくあります。

5.3. いつRESTを使用するのですか？

GraphQLはRESTの代わりにはなりません。両方が同じアプリケーションに共存することもできます。ユースケースによっては、GraphQLエンドポイントをホストする複雑さが増す価値があるかもしれません。

次の場合にRESTを使用することをお勧めします。

私たちのアプリケーションは当然リソース駆動型であり、操作は個々のリソースエンティティと非常に直接的かつ完全にリンクされています
GraphQLはネイティブにサポートしていないため、Webキャッシングが必要です。
GraphQLはネイティブでサポートされていないため、ファイルのアップロードが必要です

6. 結論

この記事では、実際の例を使用してRESTとGraphQLを比較しました。

学んだそれぞれのアプローチを従来どのように使用できるかを見ました。

次に、どちらのアプローチにも他のアプローチよりも明確な利点があることについて説明しました。私たちの要件は、それらの間で選択を行う際の原動力になります。場合によっては、両方が共存することもあります。

いつものように、この記事のサンプルコードは、GitHubでから入手できます。

getdocs

13036