useQuery() 还有一个默认行为,非常便捷,就是在网页从后台重新切入或者重新聚焦时,useQuery() 会自动触发后台数据重新获取。 这个机制的原理是,React Query 会监听网页的 visibilitychange 和 focus 事件,当document.visibilityState为'visible'或者触发 focus 事件时,就会重新请求。 当然,这个行为可以通过 refetchOnWindow...
查询React Query文档发现根本原因:窗口焦点影响的数据刷新 window-focus-refetching 解决方案 如果用户离开您的应用时数据是标记为过时的,React Query 会自动在后台为您请求新的数据。 您可以使用refetchOnWindowFocus选项在全局或每个查询中禁用此选项。 全局禁用 const queryClient = new QueryClient({ defaultOptio...
该查询配置了一个重新获取的间隔时间(refetch interval) 若要修改,可以使用refetchOnMount,refetchOnWindowFocus,refetchOnReconnect和refetchInterval。 3. 没有活动的useQuery、useInfiniteQuery或 query observers 的查询结果,会被标记为“非活动”,并保留在缓存中,以防以后再次使用它们。 4. 默认情况下,“非活动...
禁用refetch on focus可能会对您有所帮助，但我会完全删除isFetching，只留下isLoading ...
首先,需要在组件外层定义一个queryClient作为组件操作和使用数据的一个共同容器,通过QueryClientProvider组件注入到项目中。 import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query' const queryClient = new QueryClient() ...
enabled,onError,onSuccess,refetchOnWindowFocus,retry,select,staleTime,}) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 当然,为了使用 useQuery(),我们还要通过 QueryClientProvider 注入 QueryClient 实例。这部分也是样板代码: ...
其中defaultOptions用于配置项目中useQuery请求的管理,常用的配置如下: staleTime: 重新获取数据的时间间隔 默认0 cacheTime: 数据缓存时间 默认 1000 60 5 5分钟 retry: 失败重试次数 默认 3次 refetchOnWindowFocus: 窗口重新获得焦点时重新获取数据 默认 false ...
refetchOnWindowFocus默认为true,用户短暂离开再返回应用页时,数据就会被标记为过时,这时react-query会在后台自动请求新的数据,通过设置refetchOnWindowFocus为false禁用 query-keys 字符串作为query-keys时,会在内部转换为数组 useQuery('posts',...)// queryKey === ['posts'] ...
useQuery()还有默认行为，在网页重新加载或聚焦时会自动触发后台数据重新获取，这是通过监听visibilitychange和focus事件实现的。当然，这个行为可以通过refetchOnWindowFocus选项进行禁用。过期时间的概念也很重要。默认情况下，获取到的数据被认为是过期的，尽管新请求会利用缓存数据，但新请求获取的数据会立即...
这个触发条件是默认开启的,如果希望关闭这个触发条件,可以把refetchOnWindowFocus选项设置为false来禁止。 ④网络重新连接 在当前用户断网重新联网后,react-query将会重新获取数据。比如你的用户拿着手机在地下通道中,信号中断导致断网,在用户从地下通道出来时,信号连接上后,又重新联网,此时数据将会重新获取。 这个触发条...