8. Apollo Client 设置
3m
你当前使用的是该课程的旧版本。 查看课程更新日志.

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

我们来打开 React 应用的根目录 (client/src/index.js)。现在是使用 Apollo Client向我们的 发送查询的时候了！

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

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

在 client/ 目录中，运行以下命令：

npm install graphql @apollo/client

安装了这些之后，让我们从 @apollo/client 包中导入我们需要的三种符号，位于 src/index.js 中：

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

我们涵盖每个符号的功能！

ApolloClient 类

正如您所料， ApolloClient 是用于表示 本身的类。我们这样创建一个新的客户端实例：

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

我们需要向构造器提供几个选项。第一个是 uri 选项，我们使用该选项来指定 的位置。我们的服务器在本地 localhost:4000 处运行，因此 uri 选项如下所示：

uri: 'https://127.0.0.1:4000',

其次，ApolloClient 的每个实例都使用内存 缓存。这使得它能够存储和重用 结果，因此它不需要发出那么多网络请求。这样能让我们的 app 用户体验感觉更加敏捷。

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

cache: new InMemoryCache(),

配置我们的客户端所需的全部内容！这是完整的通话

const client = new ApolloClient({
  uri: "https://127.0.0.1:4000",
  cache: new InMemoryCache(),
});
代码挑战！

创建一个新的 ApolloClient 实例，并设置选项以指向“https://graphql.net.cn/swapi-graphql”

我们的客户端已准备好使用，但我们要如何让 React app 中的组件可以使用它呢？ ApolloProvider 组件就是为了这个目的而生的！

ApolloProvider 组件

ApolloProvider 组件使用 React 的上下文 API 为配置的 实例提供服务，使其在 React 组件树中可用。若要使用它，我们会使用 ApolloProvider 组件包装应用的顶级组件，并将其客户端实例作为属性传入：

ReactDOM.render(
  <ApolloProvider client={client}>
    <GlobalStyles />
    <Pages />
  </ApolloProvider>,
  document.getElementById("root")
);

现在，我们的所有页面、容器和组件都可以通过方便的 React Hook 访问客户端，这要感谢上下文 API。

现在，我们重新应用，咚咚咚，鼓声响起……什么都没变！我们仍然会获得无聊且大部分空白的布局（至少背景里还有小型火箭上的猫）。

我们的客户端已配置并可使用，但我们实际上尚未 使用它。接下来，我们将构建 ，以便为我们的主页填充数据。

我们如何让 Apollo 客户端对应用的 React 组件可用？
前一页

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

您的反馈有助于我们提高！如果您卡住了或困惑了，请告诉我们，我们将帮助您解答。所有评论都是公开的，并且必须遵守 Apollo 行为准则。请注意，已解决或已处理的评论可能会被删除。

您需要一个 GitHub 账户才能在下方发帖。没有帐号？ 改为在我们的 Odyssey 论坛中发帖。