2. GraphQL 基础
3m

概述

让我们深入了解 的工作原理以及使 运行的组件!

在本课中,我们将

  • 探索客户端请求数据以及 如何检索数据的过程
  • 了解构成 的组件

GraphQL 操作的旅程

假设我们的前端需要为特定页面获取数据。

为了获取该数据,它会向我们的 发送一个 。该应用程序将操作塑造成一个字符串,该字符串定义了它需要的 。然后,它通过 HTTP POSTGET 请求将该操作发送到服务器。

Hand-drawn illustration depicting client-land with a browser sending a query to server-land across a network

在服务器端

当我们的服务器收到 HTTP 请求时,它首先会提取包含 的字符串。它会解析并将其转换为更容易操作的内容:一个称为 的树状结构,称为 AST (抽象语法树)。使用此 AST,服务器会针对我们模式中的类型和 验证该

如果存在任何错误(例如,请求的 未在模式中定义,或者 格式错误),服务器会抛出错误并将其立即发送回应用程序。

Hand-drawn illustration depicting server-land with the GraphQL server receiving a query and going through the necessary steps

在这种情况下, 看起来不错,服务器可以“执行”它。这意味着,服务器可以继续其处理并实际获取数据。服务器会沿着 AST 遍历。

对于 中的每个 ,服务器都会调用该字段的 函数,也称为 DGS 中的 datafetcher 方法。此方法的任务是通过从正确的数据源(例如数据库或 REST API)填充正确的数据来“解析”其 。这些 不一定需要位于 中;它们可以托管在外部。

通过这种方式, 是连接 REST(以及其他 !)的强大桥梁,将应用程序的所有数据捆绑在一起。GraphQL API 充当这些数据的顶层,提供一个单一接口,通过该接口可以同时查询多个数据源。

Hand-drawn illustration depicting a resolver function retrieving data from data-land

随着所有 被解析,数据会组装成一个有序的 JSON 对象,其形状与 完全相同。

服务器会将该对象分配给 HTTP 响应主体中的 data 键,现在是返回应用程序的时候了。

Hand-drawn illustration depicting the server returning a response back to the browser in client-land

返回客户端

我们的客户端会收到包含所需数据的响应,将该数据传递给正确的组件以呈现它们,瞧,我们的数据在 UI 中呈现出来。

现在,我们已经了解了从客户端到服务器再返回的整个旅程,我们将花一些时间来深入了解描述所有服务器数据功能的

GraphQL 模式

是所有魔法发生的地方,但模式告诉我们菜单上实际上有什么。

模式 是类型和 的集合,它们构成了我们可以在 中使用的数据的所有内容的全面图像。这里没有实际的数据;只有实时数据将遵循的形状的基本框架。(就像蓝图!)

该模式有自己的语言,称为 模式定义语言SDL。我们将在下一课中更深入地了解 语法以及如何构建模式中的类型和

模式入口点

一个 (客户端发送到 的内容)可以是 查询突变订阅。一个 读取 数据,一个 更改 数据,一个 监听实时流式数据。

所有三种 映射到模式中的对应类型: Query, MutationSubscription

Query 就如同通往 的前门。它定义了一系列 ,每个字段都代表一条我们可以“追溯”的路径,以从我们的 GraphQL 服务器获取数据。每个字段都有自己的名称,并指定它返回的数据类型。这使得我们能够轻松地挑选不同的字段,并一次性获取所有我们想要的数据!

我们可以将 视为 Query 类型中 可以询问的内容 列表,从我们的 API 获取。类似地,Mutation 类型是 可以执行的操作 列表,使用我们的 API,正如我们在后面的课程中会看到的那样。

模式优先设计

为了构建我们的 ,我们将使用“模式优先”设计。这意味着我们将根据下游消费者(例如运行在移动设备和桌面上的客户端应用程序)所需的确切数据来实现项目。模式优先设计通常涉及三个主要步骤:

  1. 定义模式:我们确定我们的功能需要哪些数据,然后我们构建我们的模式,以尽可能直观地提供这些数据。
  2. 后端实现:我们使用 DGS 构建我们的 API,并从包含所需数据的任何 中获取这些数据。我们将从硬编码的模拟数据开始学习概念,然后将我们的服务器连接到一个实时 REST 数据源。
  3. 使用数据:客户端能够从我们的 API 使用数据。

模式优先设计的优点之一是,它通过允许前端和后端团队并行工作来缩短总开发时间。前端团队可以在模式定义后立即开始使用模拟数据,而后端团队可以根据该模式开发 API。这不是设计 API 的唯一方法,但我们相信它是一种高效的方法,因此我们将在整个课程中使用它。

使用数据提取器解析模式字段

正如我们在 的旅程中提到的那样,对于 中的每种类型和每个 ,我们都可以定义一个数据提取器方法。数据提取器检索特定字段的数据。这些方法可以访问各种 :数据库、REST API,甚至文本文件或 JSON!

A datafetcher reaching out to a variety of different sources for data

数据提取器允许我们定义检索 数据所需的精确逻辑,但我们并不一定需要为模式中的每个字段手动定义数据提取器。我们将在接下来的课程中了解如何在何时定义数据提取器函数。

💾 数据!

在整个课程中,我们将构建 API,它提供(并更新)银河系内房源及其功能的数据。

此模型显示了一排特色房源。对于每个房源,我们可以开始查看我们需要哪些数据:照片、位置类型、整体评分、床位数量、标题、每晚价格以及是否已关闭预订。

A screenshot of Airlock, focused on the row of featured listings and their required fields

为了创建一个 特定 房源的视图,我们需要为每个房源添加几个额外的 :其描述和提供的便利设施。

A screenshot of a single listing in Airlock, focused on two additional required fields

为了在 中表示这些不同的部分,我们可以将我们的数据视为 对象(如房源和便利设施)和 关系 之间的集合(如每个房源至少包含一个便利设施)。

现在,如果我们将每个对象视为一个 节点,并将每个关系视为两个节点之间的 ,我们就可以将整个数据模型设想为节点和边的集合。这称为应用程序的

为了定义我们 中的对象,我们将使用一种称为 的特殊语法。让我们在下一课中详细讨论

练习

以下哪些是我们的 GraphQL 服务器在收到请求时执行的操作?
以下哪些情况下我们的 GraphQL 服务器会抛出错误?
当查询成功执行时,以下哪些包含在 GraphQL 服务器返回的对象中?
GraphQL 操作
有三种类型的 GraphQL 操作。一个 
 
 读取数据。一个突变 
 
 数据。一个 
 
 监听实时流式数据。

将项目从该框拖动到上面的空白处

  • 问题

  • 连接

  • 查询

  • 订阅

  • 屏幕截图

  • 更改

以下哪些准确描述了 GraphQL 中的图?

主要要点

  • 有三种类型的 :查询、。一个 读取 数据,一个 更改 数据,一个 监听实时流式数据。
  • 模式 是类型和 的集合,它们构成了我们可以使用 中的数据执行的所有操作的全面概览。它使用 () 编写。
  • 一个数据获取器方法从我们架构中的特定中检索数据。这些函数可以访问各种:数据库、REST API、甚至文本文件或 JSON。这些数据源不需要位于内。
  • 使我们能够通过描述数据中的(节点)和关系(边)来构建 API。

下一步

本课程主要介绍如何构建一个,所以让我们开始学习语法吧!现在让我们深入了解

上一步

分享您对本课程的疑问和意见

本课程目前处于

测试版
.您的反馈意见有助于我们改进!如果您遇到问题或困惑,请告诉我们,我们会帮助您。所有评论都是公开的,必须遵循 Apollo 行为准则。请注意,已解决或处理过的评论可能会被删除。

您需要一个 GitHub 帐户才能在下面发帖。还没有帐户? 请改为在 Odyssey 论坛上发帖。