React Query invalidateQueries 没有将 loading 设置为 true

Question

我正在使用 useMutation 挂钩删除实体，并使用 useQuery 挂钩从 api 加载实体，如下所示：

const { mutate: $delete } = useMutation(deleteDiscipline, {
  onSuccess: () => {
    queryClient.invalidateQueries('disciplines')
  },
})

const { isLoading, data: disciplines } = useQuery(['disciplines', filter], getFilteredDisciplines)

我靠isLoading字段来显示加载状态栏。当我通过切换选项卡或更改过滤器触发重新获取时它会起作用（查询取决于 filter 状态）。但是当我调用 queryClient.invalidateQueries 时，会进行 api 调用并更新数据，但 isLoading 字段在整个重新获取时间内保持 true。

等待失效也无济于事：

const { mutate: $delete } = useMutation(deleteDiscipline, {
  onSuccess: async () => {
    await queryClient.invalidateQueries('disciplines')
  },
})

我如何检测请求的发生（包括所有触发器，如查询失效和其他我尚未遇到的触发器）？

Answer 1

解决方案是使用 isFetching 字段而不是 isLoading 进行后续提取。

Answer 2

isLoading 仅适用于硬加载状态，您没有 data 可显示。由于 react-query 包含 stale-while-revaliate，它会给你陈旧的数据，同时进行后台重新获取。所以在那种情况下你的状态仍然是 success，isSuccess 为真，data 可用。

isFetching 是一个附加标志，在请求进行中时始终为真。对于第一次加载以及所有后台更新都是如此。

React Query invalidateQueries 没有将 loading 设置为 true

React Query invalidateQueries does not set loading to true

reactjs

react-query