Apollo 客户端

4. Apollo 客户端

概述

我们准备把一些GraphQL 的优点运用到我们的前端。到目前为止，我们一直专注于使用 GraphQL 获得令人满意的查询体验，那么当我们离开 Sandbox 环境时，会发生什么情况？当我们实际发送查询时又会发生什么情况？

在本课程中，我们将

了解 GraphQL 查询从客户端往返服务器的行程
在我们的应用程序中安装并配置 Apollo 客户端

GraphQL 查询的行程

到目前为止，我们已经大致了解了GraphQL API 在后端的工作原理。在为我们的应用程序配备发送其第一个查询之前，我们先来填补从头到尾的过程中的几个空白。

我们从头开始：一个查询诞生于客户端。

在客户端 (📍您在此！)

我们的 Web 应用程序需要一些数据来呈现前端视图：为了获取该数据，它需要构建一个查询。应用程序将查询塑造成一个字符串，该字符串定义了字段的选择集。然后，它将在 HTTPPOST或GET请求中将该查询发送到服务器。

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

在服务器端

当我们的服务器收到 HTTP 请求时，它首先会提取带有GraphQL 查询的字符串。它会解析并将字符串转换为更好的操作形式：一个称为AST（抽象语法树）的树形结构文档。利用此 AST，服务器会根据我们架构中的类型和字段对查询进行验证。

如果有任何错误（例如：架构中未定义请求的字段，或者查询格式错误），服务器会抛出错误，并将其直接发送回应用程序。

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

在这种情况下，查询看起来不错，并且服务器可以“执行”它。也就是说，服务器可以继续它的进程并实际获取数据。服务器向下遍历 AST。

对于查询字段，服务器调用该字段的解析器函数。解析器函数的目标是通过使用来自数据库或 REST API 等正确来源的正确数据对字段进行“解析”。

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

正如查询字段

服务器将该对象分配给 HTTP 响应消息体的data键，是时候返回到我们的应用了。

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

回到客户端

我们的客户端接收到带有其所需数据的响应，将该数据传递给右侧组件以渲染它们，就这样，我们的主页从远程数据显示了其卡片。

Hand-drawn illustration depicting the browser rendering the data

这就是GraphQL 查询的旅程！

为了帮助为查询完成到服务器的这次旅程做准备，我们将使用Apollo 客户端。 Apollo 客户端是一个通过GraphQL

现在让我们深入我们的前端。

🖼 前端的第一步

让我们在我们的 IDE 中打开我们的 React 应用。

在 src 目录中，我们有一些子目录： pages、 containers、 components 和 assets：

📂 odyssey-client-side-graphql
  ┣ 📂 src
  ┃ ┣ 📂 assets
  ┃ ┣ 📂 components
  ┃ ┣ 📂 containers
  ┃ ┣ 📂 pages
  ┃ ┣ ...
  ┣ ...

我们大部分时间都会在 pages/ 和 containers/ 目录中。

components/ 文件夹包含我们的 UI React 组件。这些组件仅负责显示它们通过属性接收的数据。这些组件已经构建好，因为它们不是本教程的重点。

让我们运行该应用，看看它现在是什么样子！从根目录运行

npm start

该应用已构建并从端口 3000 提供。目前，它只是一个空布局，带有一个导航栏、一个标题、一个徽标、一个背景，仅此而已。

https://127.0.0.1:3000

The blank landing page for our Catstronauts app

任务！

我的应用正在运行。

⌨️ 让我们使用 AC3（Apollo Client 3）

让我们打开 React 应用的根目录 (src/index.tsx)。现在是时候使用 Apollo Client 向 GraphQL 服务器发送查询！

我们首先需要安装两个软件包： graphql 和 @apollo/client。

graphql 提供了解析 GraphQL 查询的核心逻辑。
@apollo/client 包含了构建客户端所需的一切，包括内存缓存、本地状态管理和错误处理。

在项目的根目录中，运行以下命令

npm install graphql @apollo/client

安装完成后，让我们从 @apollo/client 软件包中导入我们在 src/index.tsx 中需要的三个符号：

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

我们将使用全部三个软件包来设置 Apollo 客户端。

`ApolloClient` 类

正如你所期望的那样， ApolloClient是代表 Apollo 客户端本身的类。我们像这样创建一个新的客户端实例：

const client = new ApolloClient({
  // options go here
});

我们需要为构造函数提供一些选项。第一个是 uri选项，我们使用它来指定 GraphQL 服务器的位置。我们将向其传递我们在沙盒中使用的相同 URL，因此 uri选项如下所示：

uri: 'https://odyssey-lift-off-server.herokuapp.com/',

其次， ApolloClient的每个实例都使用内存中缓存。这使其能够存储并重复使用查询结果，因此不必进行太多网络请求。这使得我们应用程序的用户体验感觉快得多。

我们在 InMemoryCache实例中提供 cache选项，如下所示：

cache: new InMemoryCache(),

这是我们需要配置我们的客户端的所有内容！以下是完整的调用

const client = new ApolloClient({
  uri: "https://odyssey-lift-off-server.herokuapp.com/",
  cache: new InMemoryCache(),
});

我们的客户端已准备好使用，但是我们如何让我们的 React 应用程序中的组件使用它？这就是 ApolloProvider组件的用武之地！

`ApolloProvider` 组件

ApolloProvider组件使用 React 的上下文 API 使已配置的 Apollo 客户端实例可以在整个 React 组件树中使用。要使用它，我们将我们的应用程序的顶层组件包装在 ApolloProvider组件中，并将其客户端实例作为 prop 传递给它：

root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <GlobalStyles />
      <Pages />
    </ApolloProvider>
  </React.StrictMode>
);

现在，由于上下文 API，我们所有的页面、容器和组件都可以通过友好的 React 钩子访问该客户端。

import React from 'react';
import { createRoot } from 'react-dom/client'
import GlobalStyles from './styles';
import Pages from './pages';
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const client = new ApolloClient({
  uri: "https://odyssey-lift-off-server.herokuapp.com/",
  cache: new InMemoryCache(),
});

const root = createRoot(document.getElementById('root')!);

root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <GlobalStyles />
      <Pages />
    </ApolloProvider>
  </React.StrictMode>
);

现在我们重新启动我们的应用程序，并且，鼓声……什么也没变！我们的布局仍然单调乏味，基本为空白（好吧，至少背景中有火箭上的小猫）。

我们的客户端已进行配置并准备使用，但是我们还没有实际使用它。

https://127.0.0.1:3000

The blank landing page for our Catstronauts app

练习

当 GraphQL 服务器接收到请求时会采取哪些操作？

它将 GraphQL 查询字符串转换为抽象语法树。它从请求中提取 GraphQL 查询的字符串。它根据模式验证查询。

在哪些情况下，我们的 GraphQL 服务器会抛出一个错误？

查询到的列表字段返回空列表。传入的 GraphQL 查询字符串格式错误。请求的字段未在模式中定义。

我们如何使 Apollo Client 可用于我们应用程序的 React 组件？

我们将 React 组件树包装在 ApolloProvider 组件中。我们向将其作为道具传递给使用它的每个组件的 Apollo Client。我们在使用它的每个组件中初始化 Apollo Client。

当查询成功执行时，GraphQL 服务器返回的对象中包含以下哪一项？

包含与查询具有相同形状的结果对象的 data 键包含查询的每个请求字段的扁平值数组的 fields 键包含用于获取查询结果的唯一 URL 的 url 键

代码挑战！

创建一个新的 ApolloClient 实例，其选项设置为连接到端点 https://graphql.net.cn/swapi-graphql 并使用 InMemoryCache。将该实例分配给名为 client 的变量。

要点

一个 GraphQL 查询的旅程始于客户端应用准备一个查询并在 HTTP POST 或 GET 请求中将其发送至服务器。
GraphQL 服务器的工作是解析、验证和满足它接收到的查询。
GraphQL 服务器使用数据源和解析器来解决请求并将数据返回给客户端。
Apollo Client 是一个状态管理库，它帮助我们用 GraphQL 发起请求并管理数据。

接下来

Apollo Client 准备帮助我们进行我们的首次查询，因此让我们在开始之前将我们的前端应用与最后需要的部分连接起来：类型安全和代码生成！

上一个

下一个

分享你对本课的疑问和评论

该课程目前正在

测试版

.你的反馈帮助我们改进！如果你陷入困境或困惑，请告诉我们，我们会为你提供帮助。所有评论都是公开的，并且必须遵守 Apollo 行为准则。请注意，已得到解决或处理的评论可能会被删除。

你将需要一个 GitHub 帐户才能在下面发布。没有获得一个？改而发布在我们的 Odyssey 论坛中。

概述

GraphQL 查询的行程

在客户端 (📍您在此！)

在服务器端

回到客户端