如何观看加载状态在vue-apollo当fetchPolicy是无缓存?

Question

如果fetchPolicy设置为no-cache，则无法查看加载状态。我尝试了不同的方法。

对我来说最常用的是apollo组件属性:

apollo: {
trips: {
query: gql`...`,
loadingKey: 'loading',
watchLoading (isLoading, countModifier) {
console.log('isLoading', isLoading)
console.log('countModifier', countModifier)
}
}
},
data() {
return {
trips: [],
loading: 0
}
},

1. watchLoading回调不会被调用，不管我是否指定了loadingKey
2. 加载属性从未改变

我也尝试使用computed property:

showLoader () {
return this.$apollo.queries.trips.loading
}

总是返回false。

只有设置了no-cache，以上才正确。

Answer 1

查询中有一个名为notifyOnNetworkStatusChange(docs)的属性。

在单个查询中使用:

apollo: {
trips: {
query: gql`...`,
notifyOnNetworkStatusChange: true,
}
}

或者在客户端设置为默认值:

const apolloProvider = new VueApollo({
defaultOptions: {
$query: {
notifyOnNetworkStatusChange: true,
},
...
},
...
});