7. 设置 Apollo Client
10m

从您的前端连接到您的 API

本教程剩余章节将指导您构建应用程序的前端，该前端使用来与（这是我们刚刚构建的）进行通信：

space library

Apollo Client是 TypeScript & JavaScript 的一个综合状态管理库。它使您能够使用 来管理本地和远程数据。对视图层不可知，因此您可以使用任何您喜欢的视图层，例如：React，React Native，Vue，Ember Angular，Svelte，Solid.js，Web Components 或纯 JavaScript。

本教程使用 React（的核心库开箱即支持），但对于每个视图层，基本概念都是相同的。

设置

我们将在start/client/目录中的教程仓库（如果您跳过了服务器部分，请在此处克隆仓库）。从该目录运行：

start/client/
npm install

除了安装其他依赖项外，此操作还将安装 @apollo/client 包，其中包含我们将使用的所有 功能。

初始化 ApolloClient

创建我们的ApolloClient实例，并将其粘贴到start/client目录下的src/index.tsx文件中：

client/src/index.tsx
import { ApolloClient, gql } from "@apollo/client";
import { cache } from "./cache";


const client = new ApolloClient({
  cache,
  uri: "https://127.0.0.1:4000/graphql",
});

构造函数ApolloClient需要两个参数：

  • 我们的的uri（在本例中为localhost:4000/graphql）。
  • 用作客户端缓存的InMemoryCache实例。我们从cache.ts文件中导入此实例。

就这几行代码，我们的客户端已经准备好抓取数据了！

任务！

进行第一次查询

在我们将Apollo Client与React视图层集成之前，让我们尝试使用纯JavaScript发送一个查询。

  1. 将以下代码添加到index.tsx的底部：
client/src/index.tsx
// ...ApolloClient instantiated here...


client
  .query({
    query: gql`
      query TestQuery {
        launch(id: 56) {
          id
          mission {
            name
          }
        }
      }
    `,
  })
  .then((result) => console.log(result));

  1. 确保您的正在运行。如果您没有完成教程的服务器部分，可以从final/server运行以下命令来运行完成的服务器：

    npm install
    npm start

  2. 从start/client，运行npm start以构建和运行您的客户端应用程序。构建完成后，浏览器将自动打开到https://127.0.0.1:3000/。

  3. 当索引页打开时，您暂时看不到任何内容。打开浏览器开发者工具中的控制台。您会看到一个包含您的服务器对您查询的响应的记录Object。您请求的数据包含在该对象的data字段中，其他字段提供了有关请求状态的元数据。

您还可以在浏览器的开发工具中的网络标签下刷新页面，以查看 发送的请求的形状 （它是对 localhost:4000 的POST请求）。

  1. 接着删除您刚刚添加的 client.query() 调用，以及不必要的 gql 导入。

现在，让我们将我们的客户端集成到React中吧！

上一页