使用 apollo 客户端挂钩停止待处理的请求

Question

看起来可以通过取消挂起的请求client.stop()，但是当我们使用apollo client hooks没有client.

如何使用 apollo 客户端挂钩停止待处理的请求？

Answer 1

奋斗了几天并做出了最终有效的概念证明。

\n

我已经解释了下面的代码，这是我的 POC- Github 源代码。

\n\n

说明：

\n

步骤\xe2\x80\x93 1： \n创建一个中间件，该中间件包含通过ReactJS上下文API跟踪和取消重复请求的逻辑\xe2\x80\x93 cancelRequest.tsx（完整源代码）

\n

步骤 \xe2\x80\x93 2: \n生成名称空间 UUID 并通过查询上下文使用requestTrackerId传递它，如下所示。

\n

context:{ \n  requestTrackerId: uuidNameSpace(\'LOGIN\', RequestNameSpace) \n}\n

\n

请参阅源代码 - 第 32 行

\n

步骤\xe2\x80\x93 3： \n最后，使用 Apollo GraphQL 客户端的 API 连接所有中间件并将其设置为漏斗层from，并将queryDeduplication设置为false.

\n\n

作用机制：

\n

当多个请求源自同一突变查询时，每个查询都会被标记到其requestTrackerId与该特定查询保持相同的位置，而与其他查询保持不同的位置。

\n

使用UUID库命名空间为每个查询生成（阅读代码）。通过此 ID，中间件将每个查询与其命名空间生成的 ID 相关联，并存储在缓存对象中。

\n

使用缓存对象查找后续传入请求。如果有\xe2\x80\x99s正在进行的请求尚未完成，则将使用AbortController javascript API立即中止该请求，并且该请求将被新请求替换。

\n

使用的库

\n

\n
• UUID \xe2\x80\x93 用于创建唯一的请求跟踪器 ID 并防止来自同一组件的多个请求发生命名空间冲突。
\n
• ReactJS \xe2\x80\x93 我猜不需要介绍？
\n
• Apollo GraphQL \xe2\x80\x93 点击链接了解更多..
\n

\n

希望这个答案有帮助。快乐编码

\n