接上篇 —— 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/ 目录中工作（在此处克隆仓库）。在该目录运行下面代码：
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 密钥，如下所示：
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中运行以下命令来运行完成的服务：
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 集成在一起。
前端记事本，不定期更新，欢迎关注！
