React-query - refetch data when component mounts

Question

Is there a way to refetch the data when the component mounts? At the moment with react-router if I navigate around my app it fetches the data once and then if I navigate away and come back the data is still the old one and not a new request?

I have not wrapped my fetch call in useEffect.

const fetchInfo = async () => {
        const res = await fetch(`/api/${id}`);
        return res.json();
    };

    const { data, status } = useQuery('tableInfo', fetchInfo, {
        staleTime: 5000,
    });

using as:

{status === 'error' && (
                <div className="mt-5">Error fetching data!</div>
            )}
            {status === 'loading' && (
                <div className="mt-5">Loading data ...
                   
                </div>
            )}
            {status === 'success' && (
                <div className="mt-5">
                    <p>Result will be here</p>
                </div>
            )}

Answer 1

With your setup, if you fetch your data, move to another view and come back (at least 5 seconds later) it will refetch - if you navigate and come back BEFORE those 5 seconds - it should not.

If you want to prevent re-fetching when you consider data not becoming stale over time (or not so quickly anyway), set staleTime to more than just 5 seconds (up to Infinity)

If you want to re-fetch data on every navigation to that view - don't set staleTime at all