apollo
apollo copied to clipboard
vuejs
Loading is false using 'no-cache'
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',
},
},
@Akryum Is this not an issue caused by the referenced commit (82d6c02f7b0202d7682007449dfce56de0f5f243)?
Hey @Akryum, what is the news with this issue? what do you suggest for those who use the no-cache option
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: https://github.com/vuejs/vue-apollo/pull/280 and discussed here https://github.com/vuejs/vue-apollo/commit/82d6c02f7b0202d7682007449dfce56de0f5f243 . 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.
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 (https://github.com/apollographql/react-apollo/issues/727#issuecomment-306082518 and https://github.com/apollographql/react-apollo/issues/2238 for example), which all suggest setting the notifyOnNetworkStatusChange to fix this.
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?
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.
@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 .
The workaround I found was to add a dummy data to the query prop, so when the fetch is finished (loading finished) the prop will be either empty or filled
For example:
export default {
apollo: {
yourData: {
query: GET_YOUR_DATA,
fetchPolicy: 'no-cache'
},
data: () => ({
yourData: ['dummy'] // Any dummy value you want
}),
computed: {
// Here you put your loading check logic
isQueryLoading () {
return this.yourData[0] === 'dummy'
}
}
}
As soon as your query finish loading, it'll full or empty, but never yourData[0] === 'dummy'. You can check for errors and change the dummy data for another thing to avoid keep loading on error etc...
