窗口聚焦重新获取数据

如果用户离开了你的应用程序并返回，且查询数据已经过期，TanStack Query 会自动在后台请求新的数据。你可以使用refetchOnWindowFocus选项来全局针对特定查询禁用此行为。

全局禁用

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false // 默认值：true
    }
  }
});

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>;
}

针对单个查询禁用

如果您只希望禁用某个特定查询的窗口聚焦重新获取，可以在查询中使用 refetchOnWindowFocus 选项：

useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
  refetchOnWindowFocus: false
});

自定义窗口聚焦事件

在少数情况下，您可能希望管理自己的窗口聚焦事件，以触发 TanStack Query 重新验证。为此，TanStack Query 提供了 focusManager.setEventListener 函数，允许您提供在窗口聚焦时应触发的回调，并允许您设置自己的事件。当调用 focusManager.setEventListener 时，之前设置的处理程序（通常是默认处理程序）会被移除，新的处理程序会被替代。以下是默认的处理程序示例：

focusManager.setEventListener((handleFocus) => {
  // 监听 visibilitychange 事件
  if (typeof window !== "undefined" && window.addEventListener) {
    const visibilitychangeHandler = () => {
      handleFocus(document.visibilityState === "visible");
    };
    window.addEventListener("visibilitychange", visibilitychangeHandler, false);
    return () => {
      // 如果设置了新的处理程序，确保取消订阅
      window.removeEventListener("visibilitychange", visibilitychangeHandler);
    };
  }
});

在 React Native 中管理聚焦

在 React Native 中，您可以通过 AppState 模块获取聚焦信息，而不是使用窗口上的事件监听器。您可以使用 AppState 的 change 事件来触发应用状态更改为“活跃”时的更新：

import { AppState } from "react-native";
import { focusManager } from "@tanstack/react-query";

function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== "web") {
    focusManager.setFocused(status === "active");
  }
}

useEffect(() => {
  const subscription = AppState.addEventListener("change", onAppStateChange);
  return () => subscription.remove();
}, []);

管理聚焦状态

您还可以手动设置或重置聚焦状态：

import { focusManager } from "@tanstack/react-query";

// 覆盖默认的聚焦状态
focusManager.setFocused(true);

// 回退到默认的聚焦检查
focusManager.setFocused(undefined);

通过这些方法，您可以灵活地控制窗口聚焦时的数据重新获取行为，或者在 React Native 环境中更好地管理聚焦状态。