ReactQuery(九) Fetching标志-我们该如何处理？

ReactQuery 中的isFetching 是一种状态标识符，用于指示后台请求是否正在进行中。当查询处于status === 'loading' 状态时，足以显示查询的请求加载状态——硬加载状态。但有时候在开发者工具中，你会看到一个查询的请求状态为status === 'idle' ，但它仍然在后台执行。这是因为ReactQuery 为了性能优化，会在某些情况下对请求进行批处理 ，这种情况下请求的状态就会变成**'idle'** 。

isFetching 状态可以帮助我们解决这个问题。当一个查询处于isFetching === true 状态时，它就表示该查询已经开始，但结果还未返回。这允许我们即使在查询的状态为**'idle'** 时，也能显示查询的加载状态。

isFetching 状态的另一个用途是在无限滚动场景中。当我们使用useInfiniteQuery 钩子时，ReactQuery 会自动对请求进行批处理，这可能会导致滚动到页面底部时，仍然看不到新数据的情况。这是因为ReactQuery 默认会等到所有请求都返回后，才会更新查询的结果。

为了解决这个问题，我们可以使用isFetching 状态来判断当前是否有请求正在进行中。如果isFetching 为true ，那么我们就可以在页面底部显示一个加载指示器，让用户知道数据正在加载中。

isFetching 状态的使用非常简单，只需要在查询的选项对象中设置keepPreviousData 为true 即可。如下所示：

const { data, isFetching } = useQuery('todos', () => fetchTodos(), {
  keepPreviousData: true,
});

如果isFetching 为true ，则表示查询正在进行中。如果isFetching 为false ，则表示查询已经完成或尚未开始。

isFetching 状态是一个非常有用的工具，可以帮助我们更好地管理后台请求的状态。它可以让我们即使在查询的状态为**'idle'** 时，也能显示查询的加载状态。它还可以帮助我们在无限滚动场景中，在所有数据返回之前显示一个加载指示器。

总结

isFetching 状态是一个非常有用的工具，可以帮助我们更好地管理后台请求的状态。它可以让我们即使在查询的状态为**'idle'** 时，也能显示查询的加载状态。它还可以帮助我们在无限滚动场景中，在所有数据返回之前显示一个加载指示器。