You cannot attach .cancel to a promise in an async functions because async functions will always return a new Promise without the cancel function you attached. If you want to attach a cancel functions, it's best to use promise chaining instead of async functions.

Even better, react-query supports cancellation now by providing an AbortSignal out of the box, which you only need to attach to your request.

with axios 0.22+ and react-query v3.30+, you can do:

 const query = useQuery('key', ({ signal }) =>
   axios.get('/xxxx', {
     signal,
   })
 )

with that, react-query will cancel the network request of your query if the query becomes unused or if you call queryClient.cancelQueries('key'), e.g. when the user clicks a button.

I don't think there is. The thing is: queries have no side-effect on the server, so you can run them as often as you want and also cancel them if you are no longer interested in the result. Per default, react-query will only ignore the result, but you can also attach a cancel method to the Promise to really abort the network request.

But as soon as you've fired off a mutation, once the backend has received it and has potentially started to update a database entry - how would you cancel that from the frontend... .

Can you maybe elaborate on your use-case - what do you want to achieve?

make the authentication part of the queryKey, set it to null if it is no longer valid and set enabled to false when authentication is null :)