React Query：如何区分自动重取与用户触发重取以控制加载显示？

我有如下查询：

const query = useMyCustomQuery({ ...someParams });

该查询会在组件挂载时调用。

之后在组件的返回部分我会写类似这样的代码：

{ query.isFetching && <LoadingOverlay /> }

用来在页面上显示加载遮罩层。

现在我需要添加refetchInterval配置，实现每30秒自动重取数据。问题在于自动重取时会显示加载遮罩，而我希望用户在重取过程中仍能查看列表内容，因此不希望此时显示加载。

我知道可以将isFetching替换为isLoading，仅在首次加载时显示加载，但我还有一些用户触发的操作会触发重取，这些场景下仍需要显示加载指示器。

请问有没有办法区分这两种重取场景？

可以通过以下几种方式区分自动重取和用户触发的重取场景：

1. 结合元数据与查询状态判断 #

在用户手动触发重取时，给refetch方法传入自定义元数据标记请求来源：

// 用户触发的重取操作
const handleUserRefetch = () => {
  query.refetch({
    meta: { isUserInitiated: true }
  });
};

之后在判断是否显示加载遮罩时，结合isLoading（首次加载）、isFetching以及元数据信息：

const shouldShowLoading = query.isFetching && 
  (query.meta?.isUserInitiated || query.isLoading);

// 渲染加载遮罩
{ shouldShowLoading && <LoadingOverlay /> }

这种方式能精准识别用户触发的重取，自动重取时不会触发加载遮罩。

2. 单独维护用户重取状态 #

在组件内部声明状态变量，标记当前是否为用户触发的重取：

const [isUserRefetching, setIsUserRefetching] = useState(false);

// 用户触发重取的函数
const handleUserRefetch = async () => {
  setIsUserRefetching(true);
  try {
    await query.refetch();
  } finally {
    setIsUserRefetching(false);
  }
};

然后调整加载遮罩的显示条件：

{ (query.isLoading || isUserRefetching) && <LoadingOverlay /> }

这种方式逻辑直观，适合不需要依赖React Query元数据功能的简单场景。

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