Loading is false using 'no-cache'

[eddivalen]

Why when I reload the page loading is false?
When I use fetchMore, loading changes to true, but on the first load, loading is false
I'm using 'no-cache' option

defaultOptions: {
    $query: {
      fetchPolicy: 'no-cache',
    },
  },

[internalfx]

I have the same issue...

[Akryum]

It seems to be an issue with Apollo Client.

[govert-w3s]

@Akryum Is this not an issue caused by the referenced commit (82d6c02)?

[eddivalen]

Hey @Akryum, what is the news with this issue? what do you suggest for those who use the no-cache option

[tobiasfuhlroth]

Related to #263?

[idflood]

I reproduced the issue with the vue-apollo e2e test. If you add the :fetch-policy="'no-cache'" to the ApolloQuery here

After this change, running the npm run test:e2e:dev:client will show this error:

So this check mentionned here by michael-harrison on "no-cache" was added here: #280 and discussed here 82d6c02 . I'm still not sure it this is the cause of the issue, but disabling the loading state to prevent an issue with optimistic response of no-cache queries seems strange.

Edit: commenting the mentionned condition is enough to fix the isLoading in the ApolloQuery component but the result.loading is still always false.

[idflood]

Starting to wonder if this is an issue with apollo client.

The shouldNotifyIfLoading condition here don't seem to set the loading property if the fetch policy is no-cache or network-only.

Setting notifyOnNetworkStatusChange does indeed seems to "fix" the issue.

Reading a bit more it seems that the loading state is a recurring issue with apollo-client (apollographql/react-apollo#727 (comment) and apollographql/react-apollo#2238 for example), which all suggest setting the notifyOnNetworkStatusChange to fix this.

[MJoshua25]

Any update?

[vlodko]

any luck?

[fafamnzm]

I am using nuxtjs/apollo with ssr and I have this issue as well
Has there been any updates?
Is there anything I can do to help?
How can I prevent the user from interacting while they are waiting for a response from the server?

[fungiboletus]

If you don't mind caching the data for no good reasons and wasting memory, network-only can be used instead of no-cache as it has the expected behaviour. Another workaround is to set notifyOnNetworkStatusChange to true on the smart query which may waste cpu instead of memory but the loading status is also set correctly. The if looks like this:

if (this.options.fetchPolicy !== 'no-cache' || this.options.notifyOnNetworkStatusChange) {
  var currentResult = this.maySetLoading();

You can specify the option by default:

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

I also think the no-cache fetch policy should set the loading status by default. If some components don't expect a loading status when using a no-cache fetch policy, they could be fixed or an option could be added to still support their use case.

[fafamnzm]

@fungiboletus Thank you for your response. I have used this, however, this will not work as I hoped. this will only trigger apollo loading in the given component. What I need is a this.$apollo.loading that will be true all throughout the application when any query or mutation is running.
For example if the app is fetching something from the server, I want the page to be blurry or if a mutation is triggered, I want the whole app to be frozen and blurry until confirmation or rejection is returned from the server. This approach only set the loading key to true in the component where the query is being run and it is false for the rest of the application .