GraphQL 图片来源： 

我们将探索GraphQL 的基础知识，并学习如何使用Apollo将其与 React 和 React Native 等前端框架连接起来。这将帮助您了解如何使用 GraphQL、React、React Native 和 Apollo 构建现代、高效的应用程序。

什么是 GraphQL？

GraphQL 是一种API 查询语言。它由 Facebook 开发，作为一种更有效地获取数据的解决方案。

为什么选择 GraphQL？

GraphQL 之前

• REST API（表述性状态转移应用程序编程接口）是一种允许不同软件系统进行通信的标准化方式。

在 REST API 中，每个端点都会返回特定的 JSON 数据负载。即使我们只需要某些字段，它也会在每个请求中返回所有内容。

检索产品列表

• HTTP 方法： GET
• 端点(Endpoint)： /api/products
• 描述：检索所有产品的列表。

Request:：

GET /api/products/1

Response:

[
  {
    "id": 1,
    "name": "Laptop",
    "price": 999.99,
    "category": "Electronics",
    "description": "A high-performance laptop suitable for all your computing needs.",
    "manufacturer": "TechCorp",
    "stock": {
      "quantity": 50,
      "warehouseLocation": "Warehouse A"
    },
    "specifications": {
      "processor": "Intel Core i7",
      "ram": "16GB",
      "storage": "512GB SSD",
      "screenSize": "15.6 inches"
    },
    "images": [
      "https://example.com/images/laptop1.jpg",
      "https://example.com/images/laptop2.jpg"
    ],
    "ratings": {
      "average": 4.5,
      "count": 120
    },
    "reviews": [
      {
        "userId": 101,
        "rating": 5,
        "comment": "Excellent laptop for work and play.",
        "date": "2023-06-15"
      },
      {
        "userId": 102,
        "rating": 4,
        "comment": "Great performance but a bit pricey.",
        "date": "2023-06-20"
      }
    ]
  },
  {
    "id": 2,
    "name": "Smartphone",
    "price": 599.99,
    "category": "Electronics",
    "description": "A sleek and powerful smartphone with the latest features.",
    "manufacturer": "PhoneInc",
    "stock": {
      "quantity": 200,
      "warehouseLocation": "Warehouse B"
    },
    "specifications": {
      "processor": "Snapdragon 888",
      "ram

此外，REST API 的设计可能要求应用程序发出大量不必要的请求，因为某些数据可能来自不同的端点。

这意味着，为了检索有关特定数据，您需要发出不同的 HTTP 请求。

随着用户对更快、更高效的应用程序的需求不断增长，Facebook 认识到 REST API 中的这些问题。

2012 年，该公司开始内部开发 GraphQL，并于 2015 年向公众发布

GraphQL 如何工作？

如上所述；它是一种查询语言，这意味着它仅使用查询获取您需要的数据。

使用 GraphQL ：

• 只需管理较少的端点/graphql
• 灵活地与数据库、REST API、云服务和 JSON 文件集成

典型的 GraphQL 操作如下：

1. 通过查询从 GraphQL 服务器请求数据。
2. 在 GraphQL 服务器上调用一个函数来从适当的源获取数据。
3. GraphQL 服务器向客户端返回响应。

GraphQL 附带一个名为 GraphiQL 的 IDE，有助于开发人员测试 API。

Visual Studio 代码的 GraphQL 扩展

GraphQL 的主要功能

声明式数据获取：客户端指定所需数据的形状和大小。避免过度获取（检索比所需更多的数据）和获取不足（检索比所需更少的数据）。

单一端点：与需要为不同资源设置多个端点的 REST 不同，GraphQL 使用单一端点来访问所有数据。

强类型模式：模式定义了可以查询的数据类型以及它们之间的关系。

订阅的实时数据：客户端可以订阅数据变化并实时接收更新。

GraphQL 查询的基本结构

这是一个用于获取产品的简单 GraphQL 查询：

通过 ID 获取单个产品：

GraphQL 查询：

query {
  product(id: 1) {
    id
    name
    price
    category
    description
  }
}

 JSON 请求：

{
  "query": "query { product(id: 1) { id name price category description } }"
}

响应示例：

{
  "data": {
    "product": {
      "id": 1,
      "name": "Laptop",
      "price": 999.99,
      "category": "Electronics",
      "description": "A high-performance laptop suitable for all your computing needs."
    }
  }
}

添加新的、更新或产品（变更）：

GraphQL 变更：

mutation {
  addProduct(input: {
    name: "Tablet",
    price: 299.99,
    category: "Electronics",
    description: "A lightweight tablet with a long battery life."
  }) {
    id
    name
    price
    category
    description
  }
}

JSON 请求：

{
  "query": "mutation { addProduct(input: { name: \"Tablet\", price: 299.99, category: \"Electronics\", description: \"A lightweight tablet with a long battery life.\" }) { id name price category description } }"
}

响应示例： 

{
  "data": {
    "addProduct": {
      "id": 3,
      "name": "Tablet",
      "price": 299.99,
      "category": "Electronics",
      "description": "A lightweight tablet with a long battery life."
    }
  }
}

更新 JSON 请求

{
  "query": "mutation { updateProduct(id: 1, input: { name: \"Laptop\", price: 1099.99, category: \"Electronics\", description: \"An updated high-performance laptop with additional features.\" }) { id name price category description } }"
}

 响应示例：

{
  "data": {
    "updateProduct": {
      "id": 1,
      "name": "Laptop",
      "price": 1099.99,
      "category": "Electronics",
      "description": "An updated high-performance laptop with additional features."
    }
  }
}

如何将 GraphQL 与 JSON 结合使用

定义模式：创建一个模式来定义 API 中可用的类型和字段。

设置服务器：使用 Apollo Server 或 Express GraphQL 等服务器库来处理请求。

发送查询/变异：使用 GraphiQL、Apollo Client 或 HTTP 客户端（例如 Postman、cURL）等工具以 JSON 格式发送查询和变异

处理响应：处理来自服务器的 JSON 响应，其中包括请求的数据或变异操作的确认。

GraphQL 能够处理复杂的查询并以 JSON 格式返回精确的数据，这使其成为传统 REST API 的强大替代品，能够实现更高效、更灵活的数据获取。