如何在窗口失焦时停止RTK Query短轮询，聚焦时重新验证？

完全可以实现这个需求，无需额外依赖，通过React的页面可见性事件结合RTK Query的hooks配置即可完成，具体实现如下：

核心思路 #

1. 监听页面的visibilitychange事件，实时判断页面是否处于激活/可见状态
2. 根据页面可见状态动态设置RTK Query的pollingInterval：可见时保持5000ms轮询，不可见时设为0停止轮询
3. 当页面重新聚焦可见时，主动调用refetch方法立即刷新数据，无需等待下一轮轮询

完整代码示例 #

import { useEffect, useState } from 'react';
import { useGetAPIQuery } from './services/api'; // 替换为你的API服务路径

function YourComponent() {
  // 初始化页面可见状态
  const [isPageVisible, setIsPageVisible] = useState(document.visibilityState === 'visible');

  // 动态配置RTK Query的轮询间隔
  const { data, error, isLoading, refetch } = useGetAPIQuery(
    {}, // API查询参数（根据你的实际需求调整）
    { 
      pollingInterval: isPageVisible ? 5000 : 0,
      refetchOnMountOrArgChange: true
    }
  );

  // 绑定页面可见性监听事件
  useEffect(() => {
    const handleVisibilityChange = () => {
      const newVisibleState = document.visibilityState === 'visible';
      setIsPageVisible(newVisibleState);
      
      // 页面重新可见时立即触发数据刷新
      if (newVisibleState) {
        refetch();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    // 组件卸载时移除事件监听
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, [refetch]);

  // 组件渲染逻辑
  return (
    <div>
      {isLoading && <div>加载中...</div>}
      {error && <div>请求出错：{error.message}</div>}
      {data && <div>当前数据：{JSON.stringify(data)}</div>}
    </div>
  );
}

export default YourComponent;

关键细节说明 #

• visibilitychange事件是浏览器原生事件，兼容所有现代浏览器，无需额外处理兼容问题
• 当pollingInterval设为0时，RTK Query会自动停止当前的轮询任务
• 页面重新可见时调用refetch可以确保用户立即看到最新数据，避免等待轮询周期
• refetchOnMountOrArgChange: true确保组件重新渲染时（比如可见状态变化）能正确触发查询逻辑

内容的提问来源于stack exchange，提问作者kennysliding