如何获取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
相关产品推荐
相关产品推荐

