Query Cancellation

[apenab]

• How to cancel the request when the component is unmounted?
• How to cancel a previous same request?

I read the Query Cancellation post, but my queries not cancelled.

Currently I have something like that

export const axiosInstance = ({method, url, ...rest}) => {
    const source = axios.CancelToken.source();

    const promise = axios({
        method,
        url,
        cancelToken: source.token,
        ...rest,
    });

    // TODO: This not cancel the request
    promise.cancel = () => {
        source.cancel("Query was cancelled by React Query");
    };

    return promise;
};

[TkDodo]

How to cancel the request when the component is unmounted?

As far as I'm aware, the cancel method will only be called if your query becomes inactive while the request is still in-flight. A query becomes inactive when it has no observers, which basically means: all components that use it via useQuery have unmounted.

So if you:

• mount one component
• it starts the request
• the component unmounts before the request is finished, that request should be cancelled with your above code.

If that is not the case for you, can you create a reproducible codesandbox example?

How to cancel a previous same request?

I'm not entirely sure what you mean with that...

[apenab]

Here the codesandbox

In the image that I attach, in the App route is when the component fetch the films, later when I change to the About route the component App is dismounted and the request should be cancelled.

Thanks for the help!!!

[TkDodo]

Not quite sure why, but when I "inlined" the query, it worked fine, have a look here: https://codesandbox.io/s/gallant-moore-35y7k

I think maybe because of the axiosInstance, or maybe because of the defaultQueryFn, the token is not generated for every request? I didn't analyze it further once I got it running :)

[apenab]

I think I found the root of the problem, it seems that when I need the request to be canceled when the component is to be unmounted, I have to call the function inside the component to be unmounted. I can't use an extra abstraction.

Plz, look this sandbox

I think that it's the root of the problem

[TkDodo]

I think I got it: Your example works for me if I do one change:

- export async function getFilms() {
+ export function getFilms() {

It's not really necessary to mark your function as async, because you are not using await in there. Async functions have the ability that they always return a promise, so it looks like maybe your Promise is wrapped in another promise - I'm not really sure - I haven' really used async without await.

Anyways, I hope that helps :)

[apenab]

So, this kind of solution => https://react-query-beta.tanstack.com/guides/default-query-function, not going to cancel the request

[TkDodo]

Why not? The problem has nothing to do with the defaultQueryFn, it because of the async keyword. Here is a working example with a defualtQueryFn: https://codesandbox.io/s/falling-snowflake-hl9cj