How do i cancel all queries which have already being run

[franferns]

Hi,

I have this functionality in a react native app which on click of the button calls the

queryClient.invalidateQueries()

this invalidates and tries to download a fresh for all queries. While this downloads and completes i show a loading spinner and a cancel button to cancel this . Cancel button code is as follows

await queryClient.cancelQueries()

to cancel all request made by the invalidateQueries but this does not work properly. Nothing happens on press of the cancel button the first time but when pressed again it then cancels .

Am I missing something here to get this corrected ?

Thanks in advance.

Regards,
Francis P.

[TkDodo]

can you show an example of this behaviour in a codesandbox? Are you using the provided AbortSignal ?

[franferns]

Thank you for your reply. I figured the issue it was because i had added code queryClient.refetchQueries in the reset method.

No, i do not use the AbortSignal.

I have a query though . If i have 5 useQuery fetching data from 5 different end points and the way i download language based data is by setting the

axios.defaults.headers.common['Accept-Language'] = dataItem.CultureName; where culture name is da-DK/nb-NO etc.

and invaldate queries queryClient.invalidateQueries();

what will happen if i cancel half way through the download will those half completed be shown or are they reversed if its cancelled?

Thanks & Regards,
Francis P.

[TkDodo]

see: https://tanstack.com/query/v4/docs/react/guides/query-cancellation