[VueQuery] - Detecting local query loading status after query key changes

[klausXR]

So, when my components mount, the isLoading property is set to true and I can display a loading indicator, but if I change some of the params ( which cause the query key to be recomputed ), on the second fetch, isLoading remains false.

I see that the isFetching property changes to true on the second attempt, but which one should I use?

If I use the isFetching property to show an indicator, then if the query is set up with staleTime: 0, every time when I show stale data, I also have to show the spinner, because isFetching will be true.

Is this how this package was designed or is there a bug in the Vue implementation?

[DamianOsipiuk]

Could you link a codesandox reproducting your issue?

If there is no data in the cache for the second queryKey isLoading should be set to true. However if you have data in cache already for that key, only isFetching would be true

[klausXR]

Thanks for the answer. I forgot to mention that it is a paginated query, here's a reproduction.

https://stackblitz.com/edit/vue-amj3un?file=src%2FApp.vue

Imagine I'm rendering a table and I want to show a spinner over the table for subsequent renders when the user navigates to next page. Which property should I use to indicate the loading state?

[DamianOsipiuk]

You are using keepPreviousData flag which changes the behavior in a way that isLoading is no longer changed, cause you have data to show. This is expected behavior.

To achieve what you want you can leverage other flags, like isPreviousData.
Ex. https://stackblitz.com/edit/vue-nes8re?file=src%2FApp.vue