当fetchPolicy设为no-cache时，如何在vue-apollo中监听加载状态？

我之前也碰到过完全一样的坑！当把Apollo的fetchPolicy设置为no-cache时，默认情况下Apollo Client不会主动向组件同步网络请求的状态变化，这就是为什么你的watchLoading回调没触发、loading属性始终不变，连计算属性里的this.$apollo.queries.trips.loading也一直返回false的原因。

解决方法：添加notifyOnNetworkStatusChange: true #

只需要在你的查询配置里加上这个选项，就能强制Apollo在网络请求开始和结束时更新状态，让所有loading相关的监听逻辑正常工作。

修改后的代码示例：

apollo: {
  trips: {
    query: gql`...`,
    fetchPolicy: 'no-cache', // 你的原有配置
    notifyOnNetworkStatusChange: true, // 新增这个关键配置
    loadingKey: 'loading',
    watchLoading (isLoading, countModifier) {
      console.log('isLoading', isLoading)
      console.log('countModifier', countModifier)
    }
  }
},
data() {
  return {
    trips: [],
    loading: 0
  }
}

原理说明 #

no-cache策略的设计是绕过缓存直接发起网络请求，同时默认不跟踪请求的状态变化（因为它默认认为你只关心最终结果）。而notifyOnNetworkStatusChange会强制开启状态跟踪，让组件能实时感知到请求的加载过程，这样：

• watchLoading会在请求开始（isLoading=true）和结束（isLoading=false）时正常触发
• loading属性会随着请求的开始/结束自动增减数值
• 你的计算属性showLoader也能正确返回this.$apollo.queries.trips.loading的真实状态

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