React-query: calling queryCache.cancelQueries('key') turns isError to true if 'key' is being refetched

[naortor]

Describe the bug
Hi I'm pretty sure this isn't the intended behaviour -

when calling queryCache.cancelQueries('key') (while an optimistic update for example)
isError of const { isError } = useQuery('key') turns to true
I've made a small demo here - code sendbox demo
How to reproduce in the demo -
click on Refetch and right after on Add button, you can see isError turns to true.

Expected behavior
I would expect it to silently cancel the query without turning isError to true.

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome
• Version: 85.0.4183.121

Additional context
This is my first time ever submitting a bug, hope I did a good job

[naortor]

looking at the code
cancelQueries( predicate?: QueryPredicate, options?: QueryPredicateOptions ): void { this.getQueries(predicate, options).forEach(query => { query.cancel() }) }
I think cancelQueries inside core/queryCache should call query.cancel with silent true parameter, or at the very least make it optional to pass it as a parameter, I can create a PR if you like

[boschni]

Hi @naortor! Usually cancellation is treated as an error. In the browser for example, if a request is cancelled, it will be marked as failed and any dependent promises will be rejected. React Query follows the same principle, but I agree it might be useful to have more control on how a cancellation affects components. Sometimes you might need to know if a query has been cancelled or not because you need to show some message to the user, but sometimes you want to cancel queries silently. When cancelling silently, we also need to decide if the query then needs to fallback to a previous state (idle/success/error) or if it should remain in the fetching state, or if this should also be configurable.

[naortor]

Hi @boschni thanks for the reply :)
I totally get what you say, but reading about queryCache.cancelQueries in the docs :

seems like Optimistic updates are, if not main, a common usage for queryCache.cancelQueries and in those cases you would probably want it to cancel it silently. anyway I guess we both agree it should be configurable, I would just suggest that when canceling a query via the queryCache it will be defaulted to silent 😄

Please tell me if there anything I can do to help! thanks again!

[tannerlinsley]

Yep, this is probably the most viable and most documented use case of cancelling queries manually. I think it would be safe to have query cancellations be silent by default and revert back intelligently:

• isLoading => cancel() => isError
• isError => cancel() => isError
• isSuccess => cancel() => isSuccess
• * => cancel(error) => isError

[boschni]

Resolved with https://github.com/tannerlinsley/react-query/commit/765740df29d43197d31423dc91c78c77b1e4510a

[boschni]

The new cancellation behavior can be tested in the beta: https://react-query-beta.tanstack.com/guides/optimistic-updates

[TkDodo]

oh nice, I just stumbled upon this when doing optimistic updates - even the example in the docs behaves somewhat weird as it unmounts the list because of it. Seems like checking if data is available is better than checking for states :) But good to see this being resolved in v3 🚀