我为每个文档配置了react-query的无限陈旧时间,如下所示:
<ReactQueryConfigProvider config={{
queries: {
staleTime: Infinity
}
}}>
我的大多数查询都不会过时,除了我的'profile‘查询:
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窗口中,此查询立即显示为stale。我真的看不出我在这一点上有什么不同。对调试有什么建议吗?
发布于 2021-04-17 17:50:06
这是我认为的问题所在,以及我是如何解决它的。
因为我在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-query中的一个bug,但这似乎是一个变通方法。
发布于 2020-11-17 19:07:51
我遇到了同样的问题,它是由一个组件引起的,该组件有一个使用react-query的子组件。检查您的组件树,确保没有任何东西在<ReactQueryConfigProvider>
之外使用useProfile()。
https://stackoverflow.com/questions/63679476
复制相似问题