Query Cancellation alone doesn't do much per default: It cancels the Query itself (so data is not stored), but it doesn't abort the request.

To achieve that, you need to forward the AbortSignal provided by react-query to your fetch function. How you do this depends on what you use for data fetching - the docs have multiple examples, but here is the one for fetch:

const query = useQuery({
  queryKey: ['todos'],
  queryFn: async ({ signal }) => {
    const todosResponse = await fetch('/todos', { signal })
    return todoResponse.json()
  }
})

If the signal is passed to fetch, the Query will be cancelled automatically when the fetch is aborted. This will happen as soon as no component is mounted that is actively using the Query.

When you fire a Promise it might take a few seconds before it resolves and by that time user might have navigated to another place in your app. So when Promise resolves setState is executed on unmounted component and you get an error - just like in your case. This may also cause memory leaks.

That's why it is best to move some of your asynchronous logic out of components.

Otherwise, you will need to somehow cancel your Promise. Alternatively - as a last resort technique (it's an antipattern) - you can keep a variable to check whether the component is still mounted:

componentDidMount(){
  this.mounted = true;

  this.props.fetchData().then((response) => {
    if(this.mounted) {
      this.setState({ data: response })
    }
  })
}

componentWillUnmount(){
  this.mounted = false;
}

I will stress that again - this is an antipattern but may be sufficient in your case (just like they did with Formik implementation).

A similar discussion on GitHub

EDIT:

This is probably how would I solve the same problem (having nothing but React) with Hooks:

OPTION A:

import React, { useState, useEffect } from "react";

export default function Page() {
  const value = usePromise("https://something.com/api/");
  return (
    <p>{value ? value : "fetching data..."}</p>
  );
}

function usePromise(url) {
  const [value, setState] = useState(null);

  useEffect(() => {
    let isMounted = true; // track whether component is mounted

    request.get(url)
      .then(result => {
        if (isMounted) {
          setState(result);
        }
      });

    return () => {
      // clean up
      isMounted = false;
    };
  }, []); // only on "didMount"

  return value;
}

OPTION B: Alternatively with useRef which behaves like a static property of a class which means it doesn't make component rerender when it's value changes:

function usePromise2(url) {
  const isMounted = React.useRef(true)
  const [value, setState] = useState(null);


  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    request.get(url)
      .then(result => {
        if (isMounted.current) {
          setState(result);
        }
      });
  }, []);

  return value;
}

// or extract it to custom hook:
function useIsMounted() {
  const isMounted = React.useRef(true)

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  return isMounted; // returning "isMounted.current" wouldn't work because we would return unmutable primitive
}

Example: https://codesandbox.io/s/86n1wq2z8

[...] and navigating back it does not make a new request.

First of all, according to your code, as per the staleTime option that is set as an option on useQuery itself, the cache should invalidate every five seconds. So each time the useQuery hook is mounted (such as on route change), if five seconds have passed, a new request should be made. Your code does appear to be incomplete though as you're referencing id which appears to be undefined.

In any case, since you are requesting details of a resource with an ID, you should consider using a query key like: [planeInfo, id] instead of planeInfo alone. From the documentation:

Since query keys uniquely describe the data they are fetching, they should include any variables you use in your query function that change. For example:

function Todos({ todoId }) {
    const result = useQuery(['todos', todoId], () => 
    fetchTodoById(todoId))
}

To handle canceling the request on navigation:

You can't wrap the useQuery hook from React Query in a useEffect hook, but rather you can use use the return function of useEffect to clean up your useQuery request, effectively canceling the request when the component unmounts. With useQuery there are two ways (possibly more) to cancel a request:

• use the remove method exposed on the returned object of useQuery
• use the QueryClient method: cancelQueries

(see: useQuery reference here)

see: QueryClient reference here and specifically cancelQueries

Using remove with useEffect

(I've only kept the relevant bits of your code)

const Component2: React.FunctionComponent <RouteComponentProps<any>> = (props) => {
        const fetchChart = async() => {
          const res = await fetch(`/detail/${id}`);
          return res.json();
        };

        const {
          data,
          status,
          /** access the remove method **/
          remove
        } = useQuery('planeInfo', fetchPlane, {
          staleTime: 5000,
        });

        useEffect(() => {
          /** when this component unmounts, call it **/
          return () => remove()

          /** make sure to set an empty deps array **/
        }, [])

        /** the rest of your component **/

}

Calling remove like this will cancel any ongoing request, but as its name suggests, it also removes the query from the cache. Depending on whether you need to keep the data in cache or not, this may or may not be a viable strategy. If you need to keep the data, you can instead use the canceQueries method.

Using cancelQueries with useEffect

Much like before except here you need to export your queryClient instance from the routing component file (as you have it defined there) and then you're importing that instance of QueryClient into Component2 and calling cancelQueries on the cache key from useEffect:

import { queryClient } from "./routing-component"

const Component2: React.FunctionComponent <RouteComponentProps<any>> = (props) => {
        const fetchChart = async() => {
          const res = await fetch(`/detail/${id}`);
          return res.json();
        };

        const {
          data,
          status,
        } = useQuery(['planeInfo', id], fetchPlane, {
          staleTime: 5000,
        });

        useEffect(() => {
          /** when this component unmounts, call it **/
          return () => queryClient.cancelQueries(['planeInfo', id], {exact: true, fetching: true})
        }, [])

        /** the rest of your component **/
}

Here you see that I've implemented the query key as I suggested before, with the id as well. You can see why having a more precise reference to the cached object can be beneficial. I'm also using two query filters: exact and fetching. Setting exact to true will make sure React Query doesn't use pattern matching and cancel a broader set of queries. You can decide whether or not this is necessary for your implementation needs. Setting fetching to true will make sure React Query includes and cancels and queries that are currently fetching data.

Just note that by depending on useEffect, it is in some cases possible for it's parent component to unmount due to factors other than the user navigating away from the page (such as a modal). In such cases, you should move your useQuery up in the component tree into a component that will only unmount when a user navigates, and then pass the result of useQuery into the child component as props, to avoid premature cancellations.

Alternatively you could use Axios instead of fetch. With Axios you can cancel a request using a global cancel token, and combine executing that cancellation with React Router's useLocation (example here). You could of course also combine useLocation listening to route changes with QueryClient.cancelQueries. There are in fact, many possible approaches to your question.

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?