rare-sapphire

Running query being cancelled for no discernible reason

The situation I have a list of documents, which is fetched using useInfiniteQuery, on the page /documents/[category] with the query key ["documents", category]. Each document can be opened and edited on the page /document/[id] with the query key ["document", id]. After being edited, the document's query cache ["document", id] and any query caches matching the key ["documents"] that contain that document are invalidated. The issue After editing a document, the query cache ["documents", category] is correctly invalidated, however when /documents/[category] is opened, the request to that document category is sent out and instantly cancelled ^(devtools screenshot attached) so the old, unedited list of documents gets shown. Debugging steps attempted so far - Commented out all calls to queryClient.cancelQueries in the codebase.
- Validated that the component which calls useInfiniteQuery isn't being weirdly remounted.
- Validated that the issue happens regardless of browser.
- Updated to latest react-query - Validated that the queryClient isn't for some reason being destroyed and recreated.
- I tried and failed to build react-query locally so that I might be able to put console.logs in its code to check what's happening. Any ideas? Advice? Anything?

11 Replies

genetic-orange•3y ago

Updated to latest react-query

which version? react-query or @tanstack/react-query ? can you reproduce this in isolation, e.g. codesandbox or stackblitz ?

rare-sapphireOP•3y ago

which version? react-query or @tanstack/react-query ?

@tanstack/react-query, to version 4.33.0 I was trying to avoid making a minimal reproduction as it's going to be more time-costly than I'd like, but it seems there's no options left.

genetic-orange•3y ago

are you using abort signals ?

rare-sapphireOP•3y ago

yes, that is why I made sure to comment out all uses of cancelQueries in the codebase, to make sure I wasn't cancelling it myself somehow.

genetic-orange•3y ago

okay, just FYI, react-query also aborts the query if the last component that uses useQuery unmounts. and just in case this is the issue: in react strict mode (development only), react mounts-unmounts-mounts components, which will lead to you seeing a canceled request because of it

rare-sapphireOP•3y ago

This bug occurs in the build application, I checked that the component only mounts once, and unmounts as expected. I implemented a reproduction but the issue does not occur. The original application is rather large, so I will have to add parts one by one to the reproduction until it breaks.

rare-sapphireOP•3y ago

Well I figured out that it's to do with cancelRefetch. According to the documentation it's mean to to prevent refetching if there's already a pending query for the given page. But nowhere in the code does it actually do this. in query-core/src/queryObserver.ts it is simply defaulted to true with no checks. This is causing my issue where returning to the query (so subscribing to it again) gets cancelled.

GitHub

query/packages/query-core/src/queryObserver.ts at 35f23929a827ccd68...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

genetic-orange•3y ago

where are you passing cancelRefetch to ? This flag is set for imperative calls so that they actually do something in case another fetch is already going on

genetic-orange•3y ago

there's a bit of documentation here: https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#consistent-behavior-for-cancelrefetch

Migrating to React Query 4 | TanStack Query Docs

Breaking Changes v4 is a major version, so there are some breaking changes to be aware of:

genetic-orange•3y ago

the api docs also say (https://tanstack.com/query/v4/docs/react/reference/QueryClient):

cancelRefetch?: boolean
Defaults to true
Per default, a currently running request will be cancelled before a new request is made
When set to false, no refetch will be made if there is already a request running.

cancelRefetch?: boolean
Defaults to true
Per default, a currently running request will be cancelled before a new request is made
When set to false, no refetch will be made if there is already a request running.

the name cancelRefetch is probably not the best, because it doesn't only cancel refetches

Overview | TanStack Query Docs

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation

rare-sapphireOP•3y ago

Thank you for the links @TkDodo 🔮 , they helped a lot in finding the issue. I have an infinite scroller which was firing off fetchNextPage immediately (since having 0 pages loaded = being scrolled to the bottom of the loaded pages), causing some sort of really weird clobbering between it and the query evoked by mounting the useInfiniteQuery hook.

Gaming

Programming

Running query being cancelled for no discernible reason

Did you find this page helpful?