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

让我们看看每个符号的作用！

The ApolloClient 类

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

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

我们需要为构造函数提供几个选项。第一个是 uri 选项，我们用它来指定 的位置。我们的服务器在本地运行于 localhost:4000，因此 uri 选项看起来像这样： 

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

其次，每个 ApolloClient 实例都使用一个内存 缓存。这使它能够存储和重用 结果，从而不必执行太多网络请求。这使得我们的应用程序的用户体验更加流畅。

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

cache: new InMemoryCache(),

这就是配置客户端所需的一切！这是完整的调用代码

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

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

我们的客户端已准备就绪，但我们如何才能将其提供给 React 应用中的组件呢？这就是 ApolloProvider 组件的作用！

The ApolloProvider 组件

The ApolloProvider 组件使用 React 的 Context API 使配置后的 实例在整个 React 组件树中可用。为了使用它，我们将应用程序的顶级组件包装在 ApolloProvider 组件中，并将客户端实例作为道具传递给它： 

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

现在，我们所有的页面、容器和组件都可以通过友好的 React Hooks 访问客户端，这要归功于 Context API。

现在我们重新 我们的应用程序，然后，隆隆声... 没有任何变化！我们仍然得到我们无聊的、大部分空白的布局（好吧，至少背景中有火箭上的小猫）。

我们的客户端已配置并准备就绪，但我们还没有真正 使用 它。接下来，我们将构建 ，我们需要用它来填充我们的主页。

我们如何才能使 Apollo Client 可用于应用程序的 React 组件？
上一步

分享您对此课程的疑问和评论

您的反馈将帮助我们改进！如果您遇到困难或困惑，请告诉我们，我们将帮助您。所有评论都是公开的，必须遵循 Apollo 行为准则。请注意，已解决或处理的评论可能会被删除。

您需要一个 GitHub 帐户才能在下面发布。没有？ 请在我们的 Odyssey 论坛中发布。