使用 Apollo Link 实现 GraphQL 中的 interceptor

GraphQL 是一种查询语言，用于与 API 进行通信。它具有可以灵活组合、请求定制化以及强大的类型系统等优点，使其成为前端开发中常用的工具之一。而 Apollo Client 是一个优秀的 GraphQL 客户端库，它为我们提供了很多便捷的功能。

在我们使用 GraphQL 过程中，经常需要对请求或响应进行验证、认证、日志记录等操作。此时，我们可以通过一种叫做 interceptor 的方式来实现。

什么是 Interceptor？

Interceptor，即拦截器，是一种常见的编程模式，它允许我们在某些操作发生前或发生后，对这些操作进行一些额外的处理或扩展。在 GraphQL 中，我们可以使用 Apollo Link 实现拦截器。

Apollo Link 是一个用于构建 GraphQL 客户端的库，其内部由一系列链接组成，每个链接都可以执行特定的操作。我们可以通过 Apollo Link 来对 GraphQL 请求进行拦截、记录日志、实现认证等操作。

实现 Interceptor

首先，我们需要安装 apollo-link 和 apollo-link-http 这两个依赖：

npm install apollo-link apollo-link-http

然后，我们在代码中引入这两个库：

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

我们可以通过 createHttpLink 来创建一个发起 GraphQL 请求的链接，同时，我们也可以在这个链接上添加一个 interceptor：

// www.javascriptcn.com code example
const httpLink = createHttpLink({ uri: '/graphql' });

const interceptorLink = new ApolloLink((operation, forward) => {
  // 在这里执行拦截器操作

  // forward 方法将请求转发到下一个链接
  return forward(operation).map(response => {
    // 在这里执行处理响应的操作
    return response;
  });
});

这里我们创建了一个新的 ApolloLink，并在其中定义了一个函数，这个函数会在每个 GraphQL 请求被发送时执行。它会接受两个参数：

• operation：代表当前的 GraphQL 操作（包括查询、变更等），我们可以在这里对它进行操作。
• forward：代表下一个要执行的链接，我们可以通过它来将请求转发给下一个链接。

在函数内部，我们可以执行一些拦截器操作，比如获取用户 Token、记录请求日志等。然后我们通过 forward 方法将请求转发到下一个链接，最后在 map 方法中对响应进行处理。

示例代码

下面是一个简单的拦截器示例代码，它会在每个 GraphQL 请求前添加一个 Token：

// www.javascriptcn.com code example
import { ApolloLink } from 'apollo-link';
import { createHttpLink } from 'apollo-link-http';

const httpLink = createHttpLink({ uri: '/graphql' });

const interceptorLink = new ApolloLink((operation, forward) => {
  // 添加 Token
  const token = localStorage.getItem('token');
  operation.setContext(({ headers = {} }) => ({
    headers: { ...headers, Authorization: `Bearer ${token}` },
  }));

  // 转发请求
  return forward(operation).map(response => {
    // 在响应中获取新的 Token
    const newToken = response.headers.get('new-token');
    if (newToken) {
      localStorage.setItem('token', newToken);
    }
    return response;
  });
});

// 将拦截器链接和 HTTP 链接组合起来
const link = ApolloLink.from([interceptorLink, httpLink]);

在示例代码中，我们通过 operation.setContext 方法添加了一个 Authorization 头部，用于向服务器认证用户身份。然后我们使用 forward(operation) 方法将请求转发给下一个链接，在转发后的响应中，我们检查了是否有新的 Token，然后将其保存在本地存储中供下次使用。

总结

通过使用 Apollo Link，我们可以方便地实现 GraphQL 拦截器，这可以让我们更好地控制请求和响应，并实现各种功能。同时，Apollo Link 也提供了其他有用的 API ，如可以用来处理 GraphQL 错误、缓存等。我们可以利用这些 API 来构建更可靠、高效的 GraphQL 客户端应用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a28e6a48841e9894ef8be7