噩梦：使用 Apollo 链接封装 GraphQL API

GraphQL 是一种流行的 API 查询语言，它提供了一种更灵活，更高效的数据调用方式，使得前端开发变得更为便捷。而 Apollo 是一个开源的 GraphQL 客户端，提供了一套完整的 GraphQL 生态体系。但是，虽然 Apollo 可以大大简化前端开发中对 GraphQL API 的调用，但是使用 Apollo 链接封装 GraphQL API 仍然是一个前端开发噩梦。本文将详细介绍如何使用 Apollo 链接封装 GraphQL API，并提供示例代码以供参考。

实践过程

1. 安装依赖

使用 Apollo 链接需要先安装依赖。安装依赖的命令为：

npm install apollo-link apollo-link-http apollo-client graphql graphql-tag

2. 创建 Apollo 链接

接下来需要创建一个 Apollo 链接，代码如下：

import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';

const link = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

const apolloLink = ApolloLink.from([
  link,
]);

可以看到，这里使用了 ApolloLink 和 HttpLink。HttpLink 负责进行 HTTP 请求，然后将响应传递给下一个链接（如果有的话）。而 ApolloLink 它可以把链接链链成一条链，并使用它们依次处理 GraphQL 操作。这里，使用 ApolloLink.from 方法来将 HttpLink 创建的链接链接起来。同时，也可以在这个链接里增加自定义的逻辑来实现复杂的功能。

这里的 uri 填写了 GraphQL API 的地址，可以根据自己的 API 地址来替代。

3. 创建 Apollo 客户端

接下来需要创建 Apollo 客户端：

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  link: apolloLink,
  cache: new InMemoryCache(),
});

可以看到，这里使用了 ApolloClient 和 InMemoryCache。InMemoryCache 可以在内存中缓存 Apollo 客户端中查询的所有数据，可以大大提高应用程序的性能。而 ApolloClient 是用来创建客户端的。这里，将在上面创建的 apolloLink 链接作为 client 的 link 属性传递进去。

4. 发送查询请求

最后，可以使用 apollo-client 进行查询操作了。查询的代码如下：

import gql from 'graphql-tag';

const query = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

client.query({ query }).then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

这里使用了 gql 函数把查询字符串转换成可用的 GraphQL AST，然后使用 client.query 方法进行查询操作。注意，这里使用了一个查询 GetUsers ，其中包含查询用户 ID、名称和电子邮件。查询完后会返回一个 Promise，可以使用 .then 和 .catch 方法来访问查询结果和处理错误信息。

总结

使用 Apollo 链接封装 GraphQL API 虽然十分困难，但是当你掌握了其中的技巧和知识后，就可以使用它来大大简化前端的 GraphQL API 调用。在本篇文章中，我们通过详细的操作步骤和示例代码的展示，希望可以为读者提供一些指导和学习上的帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65912176eb4cecbf2d65cb1a