使用 apollo 客户端钩子停止挂起的请求

Posted

技术标签:

【中文标题】使用 apollo 客户端钩子停止挂起的请求【英文标题】:stop pending requests with apollo client hooks 【发布时间】:2020-04-02 09:13:54 【问题描述】:

看起来它的possible 可以通过client.stop() 取消挂起的请求,但是当我们使用apollo client hooks 而我们没有client 时,文档没有向我们展示解决方案。

如何?

【问题讨论】:

【参考方案1】:

苦苦挣扎了几天,终于做出了一个可行的概念证明。

我已经解释了blog post 中的代码,这是我的 POC - Github source code。


说明:

步骤 - 1: 创建一个中间件,其中包含通过 ReactJS 上下文 API 跟踪和取消重复请求的逻辑 - cancelRequest.tsx(完整源代码)

第 2 步: 生成命名空间 UUID 并使用 requestTrackerId 通过查询上下文传递它,如下所示。

context: 
  requestTrackerId: uuidNameSpace('LOGIN', RequestNameSpace) 

来源 - https://github.com/nirus/fullstack-tutorial/blob/cc50338b9577d58bf1e19c5b32368dfd236405f2/final/client/src/pages/login.tsx#L32

第 3 步: 最后连接所有中间件,并使用 Apollo GraphQL 客户端的 API 将其设置为漏斗层,并将 queryDeduplication 设置为 false


作用机制:

当不止一个请求来自同一个突变查询时,每个查询都被标记到其requestTrackerId,该requestTrackerId 与该特定查询保持相同,而对于其他查询则不同。

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

使用缓存对象查找后续传入请求。如果有一个正在进行的请求尚未完成,它将立即使用 AbortController javascript API 中止,并将此请求替换为新请求。

使用的库

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

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

【讨论】:

请在此处解释您的解决方案的基础 @mohas 已在博文中解释了动机和步骤。 我最终不理会请求,如果组件已卸载,则忽略 redux 或组件更新 @mohas 你在使用 redux-saga 吗?还发布一个你的源 github 或 fiddler 链接,以便我可以查看它。 抱歉,您的回答不清楚。请在这里解释

以上是关于使用 apollo 客户端钩子停止挂起的请求的主要内容,如果未能解决你的问题,请参考以下文章

如何防止 HttpListener 在停止时中止挂起的请求? HttpListener.Stop 不起作用

Chrome 中 JQuery 停止和挂起的 ajax 请求

@apollo/client 反应钩子 useQuery() 数据未定义

异步方式

Apollo 客户端没有读取使用 useQuery 钩子传入的变量

如何使用 Apollo 客户端 useQuery 钩子防止不必要的重新获取?