在前端开发中，graphql 是一个非常流行的数据查询语言。尽管 graphql 提供了强大的查询和语句创作能力，但是由于某些原因，我们可能需要在发送请求前或者响应到达前进行拦截和修改。
在 Node.js 后端中，我们可以使用中间件或者拦截器轻松地做到这一点。但是在前端中，我们往往需要手动编写代码来修改请求或响应的数据。
为了解决这一问题，我们可以使用 graphql-interceptor 这个 npm 包。本文将会详细介绍 graphql-interceptor 的使用方法。
安装和基本使用
首先，我们需要安装 graphql-interceptor。我们可以使用 npm 来安装：
npm install graphql-interceptor
graphql-interceptor 提供了一个 InterceptorLink 类，它是一个 Apollo GraphQL 的 link。要使用 InterceptorLink，我们需要先创建一个 Interceptor 实例。这个 Interceptor 实例提供了 requestWillStart 和 willSendResponse 这两个方法，它们可以在请求开始和响应即将返回时拦截并修改数据。
以下是一个使用 InterceptorLink 的示例代码：
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
------ - ---------------- ----------- - ---- ----------------------
-- ---- ----------- --
----- ----------- - --- --------------
-- -------------
------------------------------------- -- -
----- - ------ --------- - - -------
--------------------- -------- ------ --------- ---------- -------------------------------
---
-- ---------------
------------------------------------- -- -
----- - --------- ---- - - -------
--------------------- --------- --------- ------------ ----- --------------------------
---
-- --- -------------- --------------- ---------
----- ------ - --- --------------
---- --------------------------------
------ --- ----------------
----- --- -----------------------------
---
-- -- ------------ -- ------- --
--------------
------ ----
----- ---------------------- -------- -
------------------ ---------- -
--
----
-----
-
-
--
---------- -
--------- --------------
--
---------------- -- -
-------------------------
---在这个示例中，我们创建了一个 Interceptor 实例，并且向其添加了 requestWillStart 和 willSendResponse 两个方法。在实例化 ApolloClient 时，我们将 InterceptorLink 加入到链接的流程中。在 GraphQL 请求发起前和响应即将返回时，Interceptor 实例中相应的方法将会被调用。
拦截和修改数据
我们可以在拦截器中修改请求或响应的数据。下面是一个在请求中添加 Authorization 头信息的示例：
interceptor.requestWillStart((params) => {
const authorization = localStorage.getItem('Authorization');
params.context.headers = {
...params.context.headers,
Authorization: authorization ? `Bearer ${authorization}` : '',
};
});在这个示例中，我们使用了 localStorage 来存储用户的 Authorization 信息。在请求发起前，我们可以获取 Authorization 信息并添加到请求头中。
下面是一个在响应中添加 timestamp 字段的示例：
interceptor.willSendResponse((params) => {
params.response.extensions.timestamp = Date.now();
});在这个示例中，我们在响应中添加了一个 timestamp 字段，并将当前时间戳存入到该字段中。
高级用法
graphql-interceptor 还提供了一些高级用法，例如：
- 在请求出错时拦截并修改错误信息
- 在 GraphQL Schema 中使用 Interceptor 整体拦截请求和响应
有关高级用法的详细信息，请参阅 graphql-interceptor 的文档。
总结
在本文中，我们介绍了 graphql-interceptor 这个 npm 包，并且详细说明了其基本使用方法。graphql-interceptor 可以帮助我们在发送请求前或者响应到达前进行自定义拦截和修改，从而满足我们的开发需求。希望这篇文章能够对大家掌握 graphql-interceptor 的使用方法有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005545a81e8991b448d1a5d