ReactQuery对窗口焦点的重取

Question

每次我聚焦我的窗口，我的查询返回。是一个存储会话的查询，因此不需要每次都这样做，因为会向后端请求一个新的令牌:

export function useSession() {
return useQuery(['session', 'get'], getSession)
}

在我的Ap.js上:

const { data: session } = useSession();
const { mutate: login } = useLogin();
useEffect(() => {
if (session?.username === null) {
login({ username: "lime-app", password: "generic" });
}
}, [session]);

每次我再次聚焦页面(也从浏览器开发工具到网页)，会话是未定义的，所以它再次登录。

我尝试在我的QueryClient上添加refetchOnMount: false,和refetchOnWindowFocus: false,，但没有成功。

Answer 1

经过大量调试后，我意识到查询数据始终处于stale状态。阅读文档:

通过useQuery或useInfiniteQuery查询的实例默认认为缓存的数据是过时的。

这意味着每次它可以的时候，它都会尝试重取。最后，阅读文档，我发现我必须添加到查询中的唯一一件事是禁用陈旧时间的选项:{staleTime: Infinity}:

export function useSession() {
return useQuery(['session', 'get'], getSession, {staleTime: Infinity})
}

这样就不会再重新获取了