Vue Query potential issue?
Hi guys, I'm debugging a weird issue...
I have a query with the same key that is used in two places (I have
use...() in two components).
In both components it has staleTime of 60 minutes.
When I'm loading app in Cypress tests, sometimes it fails (80% of the time).
The difference between pass and fail is that when test fails - query is called only once (as expected). And test passes when query is called twice (but only one request is actually made).
My guess is that the first queryFn call is getting cancelled for some reason. The first component isn't displayed and might be unmounted very quickly, not sure. I also see the request line pop up in Electron DevTools in Network tab and then in vanishes. So it really looks like a cancelled request.
But then if the request is cancelled - the second component is 100% using that query, and from my investigation is seems like the query is considered completed there, even though it seems like it was cancelled.
I'm using vue-query@4.37.1 which is a bit old at this point, so I might just try updating it... Though we use it in conjunction with orval.dev so will have to see if they updated it...
Anyway, just wondering if this rings any bells? It's been pretty hard to debug so far, wondering if anyone ran into similar issues? Maybe this was already fixed?... Thank you!1 Reply
rival-blackOP•2y ago
Ah, also tests work fine if I don't use
staleTime, which also confirms my theory
Never mind, the problem was that our intercepts in cypress tests weren't set up correctly.
Make sure to override all intercepts before cy.visit() because query might get fired as soon as you land on the page, not when you click on something that actually uses the query, data might be preloaded depending on your setup...