反应查询，不使用缓存的数据，而是使api请求？
反应查询，不使用缓存的数据，而是使api请求？
提问于 2022-11-22 04:39:09
这是定制的钩子
export const useFilteredProfiles = (filters) => {
const { type, state, occupancy, propertyValue, loanToValue } = filters
return useQuery({
queryKey: ['profiles', type, state, occupancy, propertyValue, loanToValue]
, queryFn: ({ queryKey }) => fetchData(queryKey),
refetchOnWindowFocus: false,
retry: false,
staleTime: Infinity,
enabled: !!type
});
}我在单独的页面上使用了两个组件
第一页上有过滤器，使用这些过滤器状态，我使用上面的钩子来获取和显示当前配置文件的计数。
在第一页onClick中有一个按钮，我在路由器查询中传递这些过滤状态(如下面的代码所示)
在另一个页面中使用filter状态获取缓存的概要文件数据，但是它在那里发出api请求，而不是从缓存中获取它。
const handleClick = () => {
router.push({ pathname: `${router.pathname}/profiles`, query: { type, state, occupancy, propertyValue, loanToValue } });
}我做错了什么吗？
回答 1
Stack Overflow用户
发布于 2022-11-22 05:11:56
默认情况下将缓存查询的数据，但这并不影响它是否认为数据陈旧。如果它认为数据过时了，它将在每次调用useQuery()时调用查询函数(点击API)。这意味着，如果有缓存，它将从缓存中读取数据，但是由于它认为数据陈旧，所以仍然会在后台按API来获取任何更新的数据。
幸运的是，您可以完全控制React查询是否认为数据陈旧。您可以设置一个staleTime配置选项，以控制特定数据应该被视为新鲜的时间。您甚至可以将其设置为Infinity，也就是说，只要您的应用程序处于打开状态，它就应该只调用一次查询函数(点击API)。默认情况下，这个值为0，这就是为什么每次调用refetch时都会看到您正在看到的行为-- React查询将在后台对数据进行useQuery，因为它立即认为数据已经过时(即使数据仍然是缓存的)。
在您的示例中，如果您确实只想只调用一次API，那么只需将staleTime选项设置为Infinity即可。
useQuery("myStuff", getMyStuffQuery().queryFn, { staleTime: Infinity });此选项与所有其他选项一起，可在此处的docs https://react-query.tanstack.com/reference/useQuery中阅读。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74527574
复制相关文章
相似问题
腾讯云开发者
