React Query v4：如何仅在启用查询时显示加载状态？

你的问题在于React Query的isLoading状态在查询被禁用（比如customerId为空时）且无缓存数据的情况下，依然会返回true，导致不必要的加载动画显示。这里提供几种直接可行的解决方法：

方法1：组件内组合状态判断 #

在调用自定义Hook的地方，同时判断查询的启用状态和加载状态：

const { isLoading, isEnabled } = useGetCustomerProfile(someId); 

// 只有当查询启用且正在加载时，才显示加载动画
const showLoadingSpinner = isLoading && isEnabled;

方法2：在自定义Hook中封装逻辑 #

如果多个组件都需要这个判断，可以把逻辑封装到Hook里，避免重复代码：

export const useGetCustomerProfile = (customerId) => {
  const request = createClient({
    url: `/customers/${customerId}/trusted-profile`,
  });

  const query = useQuery({
    queryKey: ['trusted-profile', customerId],
    queryFn: request,
    enabled: !!customerId,
  });

  // 新增一个封装好的状态，直接返回给组件使用
  return {
    ...query,
    isLoadingWhenEnabled: query.isLoading && query.isEnabled,
  };
};

// 使用时直接取封装后的状态即可
const { isLoadingWhenEnabled } = useGetCustomerProfile(someId); 

方法3：用isFetching替代（按需选择） #

如果你的需求只是在发起网络请求时显示加载动画，可以直接用isFetching状态。因为当查询被禁用时，不会触发网络请求，isFetching会保持false：

const { isFetching } = useGetCustomerProfile(someId); 

注意：isFetching会在后台自动刷新查询的时候也返回true，如果不需要这种场景的加载提示，优先用前两种方法。

原理说明 #

React Query中：

• isLoading的判断逻辑是「无缓存数据且未完成首次请求」，不考虑查询是否启用；
• isEnabled直接对应配置的enabled值，反映查询当前是否处于启用状态；
• 组合两者后，就能精准控制仅在查询启用且加载时显示动画。

内容的提问来源于stack exchange，提问作者Cristian Flórez