Query fails with CancelledError when cancelling the query

[TomPradat]

Hi there, i have a page with tabs and on each tab a list of items. Those items are draggable in order to change the position of an item in the list.

The sort action is an optimistic mutation using react-query that cancels the list query.

When i go on a tab where i have already cached the list, there is a background request to update the list.

Therefore if i drag an item before this "background request" is finished, the optimistic mutation cancel the queries and the list cache has the isError to true and consequently my UI is in an error state.

I expected the cancel to be quiet. Now i'm wondering how I could handle this. Should i stop cancelling the request or prevent the DnD while there is a fetching in the background 🤔

[ryantomaselli]

For reference I did the following as a workaround.
const isCancelledError = error && error.constructor.name === 'CancelledError'
const loadingObjectsError = isError && !isCancelledError

[TomPradat]

Thanks for the tip 👍 . I still haven't given more thoughts on the matter though, i'm wondering what would be the better UX for my problem

[sergiodxa]

I agree that a cancelled query should not throw, I understand Fetch throw to force you to handle the case, but in this case it's safe to ignore a cancelled query because we are explicitly doing it

[pucka]

I ended up using this as a solution cause looking at constructor name doesn't work in the production build.

const isCancelledError = error && error.hasOwnProperty('silent');

But i totally agree that cancel a query should not throw an error. At least you should be able to turn it off

[boschni]

In V3 cancellation will not throw an error anymore: https://react-query-beta.tanstack.com/

[olegKusov]

I'm getting error CancelledError with react query V3 with unhandled rejection while running tests in selenium grid and only in firefox.

I got unhandledrejection error with reason whiсh has prop silent and revert. I didnt get what is it.

I added code below to see stack of unhandled rejection.

window.Promise = class FAKEPROMISE extends (
            Promise
        ) {
            constructor() {
                super(...arguments);
                this.__creationPoint = new Error().stack;
            }
        };

It throws here by retrier (66058):

I don't know why it throws and only in firefox in test environment.

As workaround added filter inside unhandledrejection handler:

function isCancelledError(e) {
    return 'silent' in e;
}

window.on('unhandledrejection', (ev) => {
   const err = ev.reason;
   if(isCanclledError(err)) return;
   addError(err);
}