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>
            )}

Similar question is answered stackoverflow.com/questions/62587993/… — Ram Rana
– Ram Rana, Commented Oct 21, 2021 at 12:52

Emzaw · Accepted Answer · 2021-10-21 13:37:42Z

3

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

edited Oct 21, 2021 at 13:37

answered Oct 21, 2021 at 13:21

Emzaw

7787 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sole Over a year ago

So I want the fetch data to recall when the component mounts and refresh the component?

Emzaw Over a year ago

In react-query data re-fetches after component mount by default (aka becomes "stale" right after it was fetched). To change it and tell react-query that your data is not becoming stale that fast (then it won't be re-fetched on every component render / view change), you should define staleTime.

Sole Over a year ago

so if I specify staletime, to what number?

Emzaw Over a year ago

It depends on your data in fact - if you don't expect it to change over user session lifetime - you may even go for Infinity (then you would have to mutate / refetch it manually). Otherwise, set it for amount which will prevent overfetching it (again, depends on data - it may be 1 minute as well as 15 minutes)

Sole Over a year ago

Although I think this is something to do with react-router rather than react-query

|

Collectives™ on Stack Overflow

React-query - refetch data when component mounts

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related