如何在调用queryClient.invalidateQueries更新数据后显示加载器？

核心原因 #

React Query 中 isLoading 仅在首次挂载且无缓存数据、正在发起请求时为 true。当你通过 invalidateQueries 触发已有缓存数据的重新查询时，加载状态需要用 isFetching 来判断，而非 isLoading。

具体修复步骤 #

1. 新增 isFetching 状态监听 #

在列表查询的返回值中加入 isFetching，合并判断加载状态：

const {
    data: queriedSurvey,
    fetchNextPage: fetchNextQueries,
    isLoading,
    isFetching, // 新增：监听所有正在进行的请求
  } = useListAllPublicSurvey({
    query: search,
    status: tab,
    orderDesc: orderDesc,
    actionPlanId: actionValue?.id,
  });

// 合并初始加载和后续重新请求的状态
const isDataLoading = isLoading || isFetching;
console.log("isDataLoading", isDataLoading);
if (isDataLoading) {
  return <Glimmer open={isDataLoading} />;
}

2. 确保 Query Key 匹配准确 #

如果 useListAllPublicSurvey 内部的查询 Key 包含额外参数（比如 ['searched-public-survey', search, tab]），需要调整 invalidateQueries 的调用逻辑，确保匹配所有相关查询：

export const useUpdateStatusArchiveSurvey = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateArchiveSurvey,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ['searched-public-survey'],
        exact: false, // 匹配以此为前缀的所有查询
        refetchType: 'active' // 仅重新获取当前活跃的查询
      });
    },
  });
};

3. 检查分页逻辑的影响 #

你的代码中用了 fetchNextPage 和 useEffect 触发分页加载，isFetching 会自动覆盖分页请求的加载状态，确保无论是初始分页还是重新查询后的分页，加载器都会正常显示。

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