时间戳

首页 > 解决方案 > 使用 apollo 客户端钩子停止挂起的请求

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

问题描述

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

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

标签： graphqlapolloreact-apollo

解决方案

奋斗了好几天，并做了一个最终有效的概念证明。

我已经解释了这篇博文中的代码，这里是我的 POC- Github 源代码。

解释：

步骤 - 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查询与该特定查询保持相同，而对于其他查询则不同。

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

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

使用的库

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

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

推荐阅读