react查询:为什么这一个查询总是过时的

Question

我已经为每个文档配置了具有无限过时时间的react查询，如下所示：

<ReactQueryConfigProvider config={{
queries: {
staleTime: Infinity
}
}}>

我的大多数查询都不会过时，除了一个，我的"配置文件"查询：

const getProfile = async () => {
if (!isAuthenticated()) {
return null;
}
try {
const response = await axios.get('/user/profile');
return response.data;
}
catch (error) {
errorCheck(error);
}
};
export const useProfile = () =>
useQuery('profile', getProfile);

这是保存当前用户配置文件的查询。isAuthenticated()是一个同步调用，它检查我们是否有用户令牌(所以我不会进行我知道会失败的API调用(。

出于某种原因，在react query devtools窗口中，此查询立即显示为过时。我真的看不出我对这个有什么不同。有什么调试建议吗？

Answer 1

以下是我认为的问题，以及我是如何解决的。

因为我在ReactQueryConfigProider中设置了staleTime: Infinity，所以我希望所有的查询永远不会过时。

这个查询的不同之处在于，当非UI驱动的事情发生时，我会使它无效。

我的代码中有一个会话计时器，当会话过期时，它会调用queryCache.invalidateQueries('profile')来触发任何显示配置文件的UI重新渲染。

如果在查询上下文之外调用invalidateQueries，则不会观察到ReactQueryConfigProider中的设置，因此staleTime设置为默认值0。

为了解决这个问题，对于我需要在计时器上使其无效的查询，我在查询中显式地添加了{ staletime: Infinity }：

export const useProfile = () => {
const { data: session } = useSession();
const userId = session?.userId;
return useQuery(['profile', userId], getProfile, { staleTime: Infinity });
};

我不会说这是react查询中的一个错误，但这似乎是一个变通方法。

Answer 2

我遇到了同样的问题，这是由一个组件的子组件使用了react查询引起的。检查组件树，确保在<ReactQueryConfigProvider>之外没有使用useProfile((。