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：
-- -------------------- ---- -------
----- -------- - ---------------- ---- ---------- ---
----- --------------- - --- ---------------------- -------- -- -
-- ----------
-- ------- -------------
------ ------------------------------- -- -
-- ------------
------ ---------
---
---这里我们创建了一个新的 ApolloLink，并在其中定义了一个函数，这个函数会在每个 GraphQL 请求被发送时执行。它会接受两个参数：
operation：代表当前的 GraphQL 操作（包括查询、变更等），我们可以在这里对它进行操作。forward：代表下一个要执行的链接，我们可以通过它来将请求转发给下一个链接。
在函数内部，我们可以执行一些拦截器操作，比如获取用户 Token、记录请求日志等。然后我们通过 forward 方法将请求转发到下一个链接，最后在 map 方法中对响应进行处理。
示例代码
下面是一个简单的拦截器示例代码，它会在每个 GraphQL 请求前添加一个 Token：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - -------------- - ---- -------------------
----- -------- - ---------------- ---- ---------- ---
----- --------------- - --- ---------------------- -------- -- -
-- -- -----
----- ----- - ------------------------------
----------------------- ------- - -- -- -- --
-------- - ----------- -------------- ------- --------- --
----
-- ----
------ ------------------------------- -- -
-- -------- -----
----- -------- - ----------------------------------
-- ---------- -
----------------------------- ----------
-
------ ---------
---
---
-- ------- ---- ------
----- ---- - --------------------------------- -----------在示例代码中，我们通过 operation.setContext 方法添加了一个 Authorization 头部，用于向服务器认证用户身份。然后我们使用 forward(operation) 方法将请求转发给下一个链接，在转发后的响应中，我们检查了是否有新的 Token，然后将其保存在本地存储中供下次使用。
总结
通过使用 Apollo Link，我们可以方便地实现 GraphQL 拦截器，这可以让我们更好地控制请求和响应，并实现各种功能。同时，Apollo Link 也提供了其他有用的 API ，如可以用来处理 GraphQL 错误、缓存等。我们可以利用这些 API 来构建更可靠、高效的 GraphQL 客户端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a28e6a48841e9894ef8be7