React Native中React Query结合useFocusEffect的查询重取问题

你遇到的问题根源在于手动通过useFocusEffect监听isStale触发refetch，会导致数据过期后进入循环重取的死循环。要实现和web端useQuery一致的自动查询行为，不需要手动调用refetch，直接调整useQuery的配置即可：

场景1：和web端默认行为一致（组件渲染时，数据过期则重取，否则用缓存） #

web端useQuery默认会在组件挂载/渲染时，自动判断数据是否过期（超过staleTime），过期就触发重取，否则用缓存。在React Native中只需保持useQuery的默认配置即可，无需额外的useFocusEffect逻辑：

const { status, isFetching, isPending, isError, isStale, data, error, isFetched } = useQuery({
  queryKey: ['brands'],
  queryFn: getBrands,
  staleTime: 10000,
  // refetchOnMount 默认值为true，可省略，明确设置也可以
  refetchOnMount: true,
});

这样组件每次渲染时，useQuery会自动处理：数据新鲜时直接用缓存，数据过期则自动触发重取，不会出现无意义的重复请求或循环重取问题。

场景2：组件每次渲染都强制重取（忽略缓存状态） #

如果需要不管数据是否新鲜，组件每次渲染都重新查询，只需将refetchOnMount设置为'always'：

const { status, isFetching, isPending, isError, isStale, data, error, isFetched } = useQuery({
  queryKey: ['brands'],
  queryFn: getBrands,
  staleTime: 10000,
  refetchOnMount: 'always',
});

为什么之前的写法会导致持续重取？ #

当数据超过staleTime后，isStale变为true，触发refetch；refetch完成后数据恢复新鲜，isStale变回false；再过10秒数据又过期，isStale再次变为true，再次触发refetch，如此循环往复，导致持续重取。去掉手动的refetch逻辑，让useQuery自动管理查询生命周期就能解决这个问题。

内容的提问来源于stack exchange，提问作者Usama Maqsood