$apollo.loading is not working in multiple components

[sonphnt]

Describe the bug
I have 2 components, one global component in the top right corner with spinner, and product component when users navigate to "/products".
In the product component, I have a call to graphql with apollo and $apollo.loading is working fine. I can see my loading bar work in this component.

But in global component, my spinner never shows with $apollo.loading.
<div v-if="$apollo.loading"><span class="spinner"></span></div>

I want my spinner in the top right corner showing when there are any queries to graphql server.

Is this a bug or I missed some configuration?
Thanks

Versions
vue: 2.6.11
vue-apollo: 3.0.3
apollo-client: 2.6.8

[ev3rest]

This issue has been present in apollo for almost 3 years now. See #1314
I've been battling with this all day today and still can't figure it out

[vojtapol]

I am still seeing this issue.

[nessor]

Jep. Same here.

[toddpadwick]

Did anyone figure out a solution for this?
I have a similar requirement - I have a global loading indicator in the top right of my page, and I want it to display whenever any $apollo query is loading in any component. I could set up a vuex event but this would be seriously tedious to apply to every single $apollo query. I would have thought $apollo.loading would work but it always shows false.

[Akryum]

This is expected behavior: $apollo.loading is the loading state for the current component. If you need a global loading indicator, use the watchLoading option of the VueApollo constructor as described in the docs:

const apolloProvider = new VueApollo({
  // Watch loading state for all queries
  // See 'Smart Query > options > watchLoading' for detail
  watchLoading (isLoading, countModifier) {
    loading += countModifier
    console.log('Global loading', loading, countModifier)
  },
})

[toddpadwick]

@Akryum thanks so much for clarifying. I've got the loading indicator logged in the console now. What i can't work out now from the docs is how to access that loading state in any template?
Would i need to manually set up a value in the store from that watchloading config? or is there something already accessible from the $apollo object?

[Akryum]

The implementation is left to you. You can for example use Vue.observable() to create a small reactive object that you can import in your components or in a global mixin.

const apolloState = Vue.observable({
  loading: 0,
})

Vue.mixin({
  computed: {
    $apolloGlobalLoading () { return apolloState.loading > 0 }
  }
})

const apolloProvider = new VueApollo({
  // Watch loading state for all queries
  // See 'Smart Query > options > watchLoading' for detail
  watchLoading (isLoading, countModifier) {
    apolloState.loading += countModifier
    console.log('Global loading', loading, countModifier)
  },
})

<template>
  <div v-if="$apolloGlobalLoading">Loading some query...</div>
</template>

[toddpadwick]

Fantastic that worked @Akryum .
For anyone else using Nuxt, first install the nuxt-community/observable-module.

Then in nuxt.config.js:

  modules: [
    '@nuxtjs/apollo',
    '@nuxtjs/observable'
  ],

  apollo: {
    includeNodeModules: true,
    watchLoading: '@/apollo/loadingHandler.js'
  },

@/apollo/loadingHandler.js:

export default (isLoading, countModifier, nuxtContext) => {
  isLoading += countModifier
  nuxtContext.$state.loading += countModifier;
}

/state.js

export default() => ({
	loading: 0,
})

then in your templates you can use $state.loading anywhere such as:

<loading-icon :is-loading="$state.loading"></loading-icon>