Apollo入门引导(六)：创建Apollo客户端

接上篇 —— Apollo 入门引导(五)：连接 Apollo Studio —— 继续翻译 Apollo 的官网入门引导。

在前端连接你的 API。

Apollo 入门引导 - 目录：

完成时间：10 分钟

本教程的剩余各章将逐步构建应用的前端部分，前端项目使用 Apollo 客户端与刚刚构建的 GraphQL 服务进行通信：

Apollo 客户端（Apollo Client）是 JavaScript 的综合状态管理库。使项目可以使用 GraphQL 来管理本地和远程数据。Apollo 客户端与视图层无关，因此可以与 React，Vue，Angular 甚至是 Vanilla JS 一起使用。

本教程使用 React（Apollo 客户端核心库开箱即用地支持 React），但是每个视图层的底层概念都是相同的。

建立

如果前面跳过了服务部分，可以直接在教程仓库的 start/client/ 目录中工作（在此处克隆仓库）。在该目录运行下面代码：

1	npm install

除其他依赖项外，关键是还将安装 @apollo/client 软件包，其中包括我们将使用的所有 Apollo 客户端功能。

安装 VSCode 的 Apollo 扩展(可选)

Apollo 为 Visual Studio Code 提供了扩展，其中包括许多有用的功能，例如语法突出显示，GraphQL 字段的 IntelliSense 建议以及性能评估。

1.大多数 VSCode 扩展功能均由 Apollo Studio 提供支持。要充分利用扩展，首先确保连接到了 Apollo Studio。

2.与 Apollo Server 一样，VSCode 扩展使用API 密钥与 Studio 进行通信。可以通过设置环境变量 APOLLO_KEY 的值来提供此 API 密钥。

复制 start/client/.env.example 的内容，在 start/client 目录下创建 .env 文件。然后粘贴 API 密钥，如下所示：

1	APOLLO_KEY=在这里粘贴你的密钥

现在，密钥存储在环境变量 APOLLO_KEY 中。Apollo VSCode 使用此 API 密钥从注册的 Apollo schema 中获取服务的schema。

3.同样在 start/client 中，打开名为 apollo.config.js 的空文件。使用此文件来配置 Apollo VSCode 扩展和 Apollo CLI。

将以下代码段粘贴到 apollo.config.js 文件中：

module.exports = {
  client: {
    name: 'Space Explorer [web]',
    service: '在这里粘贴你的 Graph 名',
  },
};

将 service 替换为上一章的 Studio 中创建的 graph 名。

这样就可以使用 VSCode 扩展了！现在开始构建第一个客户端。

初始化 `ApolloClient`

将以下内容粘贴到 src/index.tsx 中来创建 ApolloClient 的实例：

import { ApolloClient, gql, NormalizedCacheObject } from '@apollo/client';
import { cache } from './cache';

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  cache,
  uri: 'http://localhost:4000/graphql',
});

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

GraphQL 服务的 uri （在本例中为 localhost:4000 ）。
InMemoryCache 的实例，用作客户端的 cache。从cache.ts 文件导入该实例。

仅需几行代码，客户端就可以获取数据了！

进行第一个查询

在将 Apollo 客户端与 React 视图层集成之前，先尝试使用原始 JavaScript 发送查询。

将以下内容添加到 index.tsx 的底部：

// ...ApolloClient instantiated here...

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

确保 GraphQL 服务正在运行。如果没有完成本教程的“服务”章节，则可以通过从 final/server 中运行以下命令来运行完成的服务：

1 2	npm install npm start

3.从 start/client 目录中，运行 npm start 以构建并运行的客户端应用程序。构建完成后，浏览器将自动打开链接 http://localhost:3000/。

4.打开索引页面后，在浏览器的开发者工具中打开控制台。将看到一个打印出来的 Object，其中包含服务对查询的响应。请求的数据包含在对象的 data 字段中，其他字段提供了关于请求状态的元数据。

您还可以在浏览器的开发者工具中打开 Network 标签，然后刷新页面，查看 Apollo 客户端执行查询请求的 graph（这是对 localhost:4000 发起的 POST 请求）。

5.删除刚添加的 client.query() 调用，以及不再需要的 gql 的导入。

接下来，将客户端与 React 集成在一起。

前端记事本，不定期更新，欢迎关注！

微信公众号：林景宜的记事本
博客：林景宜的记事本
掘金专栏：林景宜的记事本
知乎专栏：林景宜的记事本
Github: MageeLin

建立

安装 VSCode 的 Apollo 扩展(可选)

初始化 ApolloClient

进行第一个查询

初始化 `ApolloClient`