React Query是否提供useIsInitialLoad？如何判断初始加载状态？

核心结论 #

React Query 没有专门绑定到 queryClient 的 useIsLoading 或 useIsInitialLoad 钩子，但可以通过现有 API 实现完全一致的逻辑。

具体实现方式 #

1. 单个查询直接用 useQuery 自带状态 #

每个 useQuery 调用都会返回对应查询的加载状态，这是最常用的方式：

const { data, isLoading, isInitialLoading } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos
});

• isLoading：查询正在获取数据时为 true，包括首次加载和后台重新获取
• isInitialLoading：仅在首次加载数据时为 true，后台自动重新获取数据时不会触发

2. 通过 queryClient 全局判断特定查询状态 #

如果需要基于 queryClient 手动判断全局或指定查询的加载状态，可以用 getQueryState 方法：

const queryClient = useQueryClient();
const queryState = queryClient.getQueryState(['todos']);

// 判断是否处于首次加载
const isInitialLoad = !queryState?.data && queryState?.status === 'loading';
// 判断是否正在获取数据（含重新获取）
const isLoading = queryState?.status === 'loading';

• getQueryState 会返回对应 queryKey 的状态对象，包含 status（可选值：idle/loading/error/success）和 data 字段
• 当 data 不存在且 status 为 loading，即可判定为首次加载中；只要 status 为 loading，就表示当前查询正在获取数据

补充说明 #

• useIsFetching 返回的是全局正在进行的请求总数，和单个查询的 isLoading 是不同维度的状态：前者统计所有请求，后者针对特定查询的加载状态
• 如果需要全局监听多个查询的加载状态，可以遍历目标 queryKey 列表，逐个调用 getQueryState 后聚合判断

内容的提问来源于stack exchange，提问作者chrisl-921fb74d