You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何获取Apollo Client正在重新获取指定Query的加载状态

解决方案
  • 方案1:开启notifyOnNetworkStatusChange配置(最优解,无需改动现有refetchQueries逻辑)
    Apollo Client的useQuery默认仅在首次请求时更新loading状态,后续重取行为的网络状态变化需要主动开启通知开关,只需给对应useQuery添加配置项即可:
const {
  data,
  loading, // 重取时会正常切换true/false
  networkStatus, // 可选,用于细分加载场景
} = useQuery(getRecommendationsQuery, {
  notifyOnNetworkStatusChange: true,
});

如果需要区分首次加载和重取状态,可以判断networkStatus的枚举值:

  • 1 = 首次加载中

  • 4 = 重取加载中

  • 7 = 加载完成

  • 可选优化:mutation侧配置awaitRefetchQueries
    如果需要保证mutation的执行结束状态和重取查询的结束状态同步,可以在mutation配置中添加该参数,避免mutation完成后界面先跳旧数据再刷新的闪烁问题:

const [setUserLocation, setUserLocationResult] = useMutation(setUserLocationMutation, {
  refetchQueries: [{ query: getRecommendationsQuery }],
  awaitRefetchQueries: true,
});
  • 方案2:全局订阅查询状态(仅用于多组件共享查询状态的复杂场景)
    如果有多个组件需要感知该查询的加载状态,可以通过Apollo Client实例的watchQuery方法创建全局订阅,或者通过React Context共享查询的返回状态,相比你原本想存refetch方法的方案更符合Apollo的设计规范。

内容的提问来源于stack exchange,提问作者gentlee

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 20:09:03