It seems that a useQuery() sometimes gets unsubscribed for no apparent reason, how can I accurately diagnose when this happens?

[Evertt]

So I'm using vue-query to fill a v-client-table component using its :data="data" prop. This works completely fine, as expected, 99% of the time.

However, if I just leave the tab open for a while, I'm not sure how long, but an hour usually does it. And you know, I'm doing other things in other tabs during that time. Then when I come back to my tab with the v-client-table, it doesn't seem to be subscribed anymore to the query.

Even though vue-query's developer tools do suggest that there is a live subscription:

So how do I know that the table is not subscribed? Well because when I perform an add, update or remove mutation, the table doesn't anymore show the optimistic ui changes that are performed by the onMutate and onSettled handlers.

However, when I simply refresh the page, then everything works fine again. So I'd like to understand why this subscription seems to close sometimes. If I can prevent it from happening, that'd be great. Otherwise, if I can just know that it happened, then I can refresh the page manually and that would also be an acceptable solution.

Any help would be much appreciated 🙏

[DamianOsipiuk]

Hi, could you try to use the new vue-query devtools plugin for the vue devtools?
In there you can find the timeline with events about vue-query.
Then after getting back to your application you can check whether query got refetched after page has been refocused (it should be the case, unless you opt-out from that via config).
This should tell us whether query has still active subscription and only optimistic updates get broken, or whole subscription got lost.

---

Solution:

You should use useQueryClient instead of importing your own queryClient instance. This will get the same reference that useQuery uses.

[Evertt]

Thank you for watching the video, I really appreciate it.

Interestingly enough, the cacheTime is already set to 8 hours. And the problem definitely appears before those 8 hours are over. The staleTime is set to 30 minutes, because honestly 90% of the time there's no reason to think that the local data will get out of sync with the server data.

For now, what I think I'll do, is write a piece of code that observes when a mutation is run, and then checks if the data property of the related query is mutating, and if it isn't, it'll run client.invalidateQueries(key) or refreshes the page, whichever works better.

Other than that, maybe some minimal reproduction repo would be helpful to pinpoint the issue.

Yeah I was thinking about that, but since this problem only occurs sometimes, I think it would take me a lot of time to figure out what the minimum example would be that reproduces this behavior.

[Evertt]

Hey I have a little update. One thing I found out is that I can consistently reproduce the issue by just editing a page that is using useQuery(). Then when the page is hot-module-updated, the connection between its useQuery() and the client.setQueryData() that is used by the mutation hook handlers breaks. Which seems to imply that suddenly useQuery() is using a different QueryClient than the mutation hook handlers are using.

Maybe it's good to know by the way, that I set up my own custom QueryClient in src/vue-query.ts

import { QueryClient, VueQueryPlugin, QueryCache, MutationCache } from 'vue-query'

const vueQueryClient = new QueryClient({
  queryCache: new QueryCache({
    onError(error, query) {
      handleError(error as AxiosError, query.queryKey)
    },
    onSuccess(_, query) {
      hooksInfoStore.removeError(query.queryKey)
    }
  }),
  mutationCache: new MutationCache({
    onError(error) {
      if ((error as AxiosError).response?.status === 401) {
        handleUnauthorizedError()
      }
    }
  }),
  defaultOptions: {
    queries: {
      staleTime: 30 * 60 * 1000, // 30 minutes
      cacheTime: 8 * 60 * 60 * 1000, // 8 hours
      retry: (count, error) => ![401, 422].includes((error as AxiosError).response?.status) && count < 3
    },
    mutations: {
      retry: (count, error) => ![401, 422].includes((error as AxiosError).response?.status) && count < 3
    }
  }
})

export { VueQueryPlugin, vueQueryClient }

And I also export that client, as you can see. Then I import that client in main.ts and all the files where I use mutation hook handlers.

// src/main.ts

import { vueQueryClient, VueQueryPlugin } from "./vue-query"

// ...

const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClient: vueQueryClient
}
app.use(VueQueryPlugin, vueQueryPluginOptions)

So it seems like, when a page is hot-module-updated, vue-query creates a whole new QueryClient that is disconnected from my custom made client that I'm using.

I don't know if this helps, but I thought, if you're interested in hunting down this bug, maybe this info can help.

[DamianOsipiuk]

I think the culprit here might be and all the files where I use mutation hook handlers.
You should use useQueryClient to get the client reference. This will get the same reference that useQuery uses.

[Evertt]

What a coincidence. I hadn't read your reply yet, but I just implemented that indeed, and indeed that fixes all the issues I was having. 😃

I still don't understand though why the bug was created in the first place. I mean, if I create a custom QueryClient instance which I set up as the default queryClient in vueQueryPluginOptions, then why should useQueryClient() ever return a different instance than the one I made?

The bug is fixed now, so that's the most important and worth celebrating. But I would be curious to know the answer to that question.

In any case I want to thank you so much for taking the time to help me bugfix this. I know that maintaining an open-source project and answering developer's questions can be very time consuming. So I really appreciate your time. 🙏 🙏 🙏

edit

I wish I could mark your very last comment as the answer. But I can only mark your top-level comment as the answer. If you can copy your very last comment as a new top-level comment, then I'll mark that as the answer for future developers who are running into the same problem.

[DamianOsipiuk]

I have edited the first comment.

I think that it might be the order of updates that hot-module-update performs.
Ex. First will update VueQueryPlugin which will provide queryClient to the Vue context, but with old reference of queryClient. Then queryClient file will be hot-updated, creating whole new instance of queryClient. Those two will not match anymore.
If you use useQueryClient though you will always get the reference from Vue context, which is set only once via VueQueryPlugin, so you are always reffering to the same object.