概述

當創建web服務應用程序時，可以選擇使用REST或GraphQL作為通信模式。兩者都可能在HTTP上使用JSON，但有不同的優點和缺點。

本文主要比較GraphQL和REST，以操作一個產品數據庫示例，比較兩種解決方案在執行相同的客戶端操作時的差異：

創建處于草稿狀態的產品
更新產品詳細信息
獲取產品列表
獲取單個產品及其訂單的詳細信息

REST

REST（Representational State Transfer，代表性狀態傳輸）的主要數據元素稱為Resource。在本例中，資源是“產品”。

創建產品

curl --request POST 'http://localhost:8081/product' 
--header 'Content-Type: Application/json' 
--data '{
  "name": "Watch",
  "description": "Special Swiss Watch",
  "status": "Draft",
  "currency": "USD",
  "price": null,
  "imageUrls": null,
  "videoUrls": null,
  "stock": null,
  "averageRating": null
}'

更新產品

curl --request PUT 'http://localhost:8081/product/{product-id}' 
--header 'Content-Type: application/json' 
--data '{
    "name": "Watch",
    "description": "Special Swiss Watch",
    "status": "Draft",
    "currency": "USD",
    "price": 1200.0,
    "imageUrls": [
        "https://graphqlvsrest.com/imageurl/product-id"
    ],
    "videoUrls": [
        "https://graphqlvsrest.com/videourl/product-id"
    ],
    "stock": 10,
    "averageRating": 0.0
}'

獲取產品列表

curl --request GET 'http://localhost:8081/product?size=10&page=0'

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

通過訂單獲取單個產品

要獲取產品及其訂單，通常需要先調用產品列表API，然后調用訂單資源以查找相關訂單：

curl --request GET 'localhost:8081/order?product-id=1'

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

除了獲取所有產品的原始操作外，還需要對每個感興趣的產品執行一次此操作，這會產生N+1的相關問題。

GraphQL

GraphQL API操作包含Queries和Mutations。Queries負責獲取數據，Mutations用于創建和更新。

Queries和Mutations的Schema模式定義了客戶端可能的請求和響應。

創建產品

curl --request POST 'http://localhost:8081/graphql' 
--header 'Content-Type: application/json' 
--data 
'{
  "query": "mutation {saveProduct (
    product: {
      name: "Bed-Side Lamp",
      price: 24.0,
      status: "Draft",
      currency: "USD"
    }){ id name currency price status}
  }"
}'

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

更新產品

curl --request POST 'http://localhost:8081/graphql' 
--header 'Content-Type: application/json' 
--data 
'{"query": "mutation {updateProduct(
    id: 11
    product: {
      price: 14.0,
      status: "Publish"
    }){ id name currency price status }  
  }","variables":{}}'

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

獲取產品列表

curl --request POST 'http://localhost:8081/graphql' 
--header 'Content-Type: application/json' 
--data 
'{
    "query": "query {products(size:10,page:0){id name status}}"
}'

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

通過訂單獲取單個產品

curl --request POST 'http://localhost:8081/graphql' 
--header 'Content-Type: application/json' 
--data 
'{
    "query": "query {product(id:1){ id name orders{customerId address status creationDate}}}"
}'

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