一文带你了解 GraphQL 和 REST 的区别和使用场景

一、概述

---

在创建 Web 服务来支持我们的应用程序时，我们可以选择使用 REST 或者 GraphQL 作为通信模式。虽然两者都最有可能在 HTTP 上使用 JSON，但它们有不同的优点和缺点。

在本教程中，我们将比较 GraphQL 和 REST。我们将创建一个产品数据库示例，并比较两种解决方案在执行相同的客户端操作时有何不同。

二、示例服务

---

我们的示例服务将允许我们：

• 在草稿状态下创建产品
• 更新产品详情
• 获取产品列表
• 获取单个产品的详细信息及其订单

让我们从使用 REST 创建应用程序开始。

三、REST

---

REST (Representational State Transfer) 是分布式超媒体系统的一种 架构风格。 REST 中的主要数据元素称为 Resource。在此示例中，资源是 *"product"*。

3.1 创建产品

要创建产品，我们将在 API 上使用 POST 方法：

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
}'

调用上述请求后系统将创建一个新产品。

3.2 更新产品

在 REST 中，我们通常使用 PUT 方法更新产品：

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
}'

因此，{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,
  "imageUrls": ["https://graphqlvsrest.com/imageurl/1"], 
  "videoUrls": ["https://graphqlvsrest.com/videourl/1"], 
  "stock": 10, 
  "averageRating": 3.5 
}

3.4 通过订单获取单个产品

要获取产品及其订单，我们通常希望使用之前的 API 获取产品列表，然后调用 order 资源以查找相关订单：

curl -X GET https://graphqlvsrest.com/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"
}

当我们通过 product-id 查询订单时，将 id 作为查询参数提供给 GET 操作是有意义的。但是，我们应该注意，除了原始操作以获取所有产品之外，我们还需要对我们感兴趣的每个产品执行一次此操作。

四、GraphQL

---

GraphQL 是一种用于 API 的查询语言，它带有一个运行时，用于使用现有数据服务来完成这些查询。

GraphQL 的构建块是 查询和突变。查询负责获取数据，而突变用于创建和更新。

查询和修改都定义了一个 Schema。Schema 定义了可能的客户端请求和响应。

让我们使用 GraphQL Server 重新实现我们的示例。

4.1 创建产品

让我们使用一个名为 saveProduct 的修改：

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}
  }"
}'

在这个 saveProduct 函数中，圆括号内的所有内容都是 输入类型Schema。后面的大括号则描述了服务器要返回的 字段。

当我们运行修改时，我们预期是服务端返回一个带有所选字段的响应值：

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

这个请求与我们使用 REST 版本发出的 POST 请求非常相似，尽管我们现在可以自定义响应。

4.2 更新产品

同样，我们可以使用另一个名为 updateProduct 的方法来修改产品：

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"
    }
  }
}

正如我们所见，GraphQL 提供了响应格式的灵活性。

4.3 获取产品列表

要从服务器获取数据，我们将使用查询：

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"
      },
      ...
    ]
  }
}

4.4 通过订单获取单个产品

使用 GraphQL，我们可以要求 GraphQL 服务器将产品和订单连接在一起：

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}}}"
}'

在这个查询中，我们获取 id 等于 1 的产品及其订单。这使我们能够在单个操作中发出请求，让我们检查响应：

{
  "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"
        }, 
        ...
      ]
    }
  }
}

正如我们在此处看到的，响应包含产品的详细信息及其各自的订单。

为了使用 REST 实现这一点，我们需要发送几个请求——第一个请求获取产品，第二个请求获取相应的订单。

五、比较

---

这些示例展示了 GraphQL 如何减少客户端和服务器之间的流量，并允许客户端为响应提供一些格式化规则。

值得注意的是，这些 API 背后的数据源可能仍然需要执行相同的操作来修改或获取数据，但如果使用 GraphQL，客户端和服务器之间的丰富接口会让客户端做的工作会更少。

让我们进一步比较这两种方法。

5.1 灵活和动态

GraphQL 允许灵活和动态的查询：

• 客户端应用程序只能请求必须得字段
• 别名 可用于自定义字段的名称
• 客户端可以使用查询来管理结果顺序
• 客户端可以更好地与 API 中的任何修改分离，因为响应对象的结构没有单一版本可以遵循

5.2 操作花费更少的资源

每个服务器请求的往返时间和有效负载大小都和价格相关。

在 REST 中，我们最终可能会发送多个请求以实现所需的功能。这些多个请求将是一项昂贵的操作。此外，响应负载可能包含客户端应用程序可能不需要的不必要数据。

GraphQL 倾向于避免代价过高的操作。 我们通常可以使用 GraphQL 在单个请求中获取我们需要的所有数据。

5.3 什么时候要使用 REST？

先说结论：GraphQL 不能替代 REST。 两者甚至可以在同一个应用程序中共存。使用 GraphQL 的服务复杂性会增加可能是值得的，也取决于具体场景。

在以下情况下，我们使用 REST 可能更合适：

• 我们的应用程序自然是资源驱动的，其中操作与各个资源实体非常直接且完全相关联
• 需要 Web 缓存
• 我们需要文件上传

六、结论

---

在本文中，我们使用一个实际的示例比较了 REST 和 GraphQL。

我们看到了我们如何按照惯例使用每种方法。最后，我们讨论了这两种方法相互之间的优势。我们的结论是两者不能相互替代。

---

本文亦通过 NoOne's Blog 发表。