在未聚焦的窗口上禁用 RTK 查询的短轮询，并在恢复焦点时重新验证

Question

我使用 Redux Toolkit 和 RTK 查询来管理我的 React 应用程序中的 API 调用和状态。

对于特定的API，我试图通过短轮询来模拟实时更新效果，并通过以下方式调用API减速器中定义的API，

  const { data, error, isLoading } = useGetAPIQuery(
    {},
    { pollingInterval: 5000 }
  );

但是，我希望当用户离开窗口时停止短轮询，例如将聚焦的选项卡切换到另一个选项卡，并在窗口再次聚焦后重新验证数据。

RTK查询可以吗？

在 Github

上发布的问题中也提出了类似的问题

Answer 1

当然，你可以使用像

use-window-focus

这样的包来检测焦点。

  const windowFocused = useWindowFocus();
  const { data, error, isLoading } = useGetAPIQuery(
    {},
    { pollingInterval: windowFocused  ? 5000 : false }
  );

Answer 2

我在 docs

中发现了条件获取

我们可以使用钩子来检查窗口是否处于焦点状态，例如

use-window-focus

library

然后将此布尔值传递给

skip

选项，页面将在窗口重新聚焦时自动立即重新验证

  const { data, error, isLoading } = useGetAPIQuery(
    {},
    { pollingInterval: 5000, skip: isWindowFocused }
  );

Answer 3

RTK 版本 2.1.0 现在有一个内置的skipPollingIfUnfocused 选项。

发行说明。

文档