React Query refetching data when changing routes in nextjs

Question

I am using @tanstack/react-query": "^4.26.0" in my "next": "13.2.1", project. I have a query which triggers on the index page.

GiveawayDetailsQuery-

export const useGiveawayDetails = () => useQuery(["giveawayDetails"], async () => {
    const response = await axios.get("/api/giveaway/giveaway-details")
    const data: giveawayDetails = await response.data;
    console.log(data);
    return data;
},
    {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        refetchInterval: 5 * 60 * 1000,
        onError: (error: any) => {
            if (error.response.status === 422 || error.response.status === 401) {
                toast(error.response.data.data.detail, { type: "error", toastId: "unauthorized" });
            } else {
                toast(error.response.data.data.detail, { type: "error" });
            }
        }
    },
);

My index.tsx page -

export default function Home() {

  return (
    <>
      <main className={styles.main}>
        <Giveaway />
        <BrandDiscounts />
        <YourRewards />
      </main>
    </>
  )
}

My Giveaway.tsx component -

const Giveaway = () => {
    const { isLoading, isError, data, error } = useGiveawayDetails();
    return (
        <div className={styles.container}>
            <p className="text-600 text-md">Giveaways</p>
            <div className={styles["giveaway-container"]}>
                {
                    isLoading && !isError && <Skeleton
                        variant="rectangular"
                        width={210}
                        height={118}
                        className={styles["loading-skeleton"]} />
                }
                {
                    isError && !isLoading && <p className={`text-500 text-md ${styles["error-container"]}`}>{error?.response?.data?.data?.detail ?? "Something went wrong"}</p>
                }
                {
                    !isError && !isLoading && data?.giveaway &&
                    <Link href="/giveaway">
                        <Image src={data.giveaway[0].thumbnail_url} alt={data.giveaway[0].title} width={887} height={1183} priority={true} />
                    </Link>
                }
            </div>
        </div>
    )
}

export default Giveaway

Now the thing is when I open the index page, the query is fetched, and when I move to some other routes, and go back to the index page the query is fetched again automatically, and I want to disable this. I want to refetch the query when I want to.

score 1 · Answer 1 · answered Mar 08 '23 at 15:12

1

You need to disable the query and use refetch when you want to manually trigger the query.

answered Mar 08 '23 at 15:12

cwalvoort

1,851
1
18
19

score 1 · Accepted Answer · edited Mar 21 '23 at 00:01

1

From Tanstack Query => Create a new instance inside of your app, and on an instance ref (or in React state). This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per component lifecycle.QueryClient

const [queryClient] = React.useState(() => new QueryClient())

solved for me

edited Mar 21 '23 at 00:01

Ram Chander

1,088
2
18
36

answered Mar 14 '23 at 17:59

Walberson Dias da Silva

26
1

score 1 · Answer 3 · edited May 04 '23 at 20:35

React Query will do automatic refetch when a component mounts AND the data is considered stale. Staleness of a query can be set with staleTime, and it defaults to zero. So really, all you have to decide is how long data you receive from the backend should be considered fresh and then set staleTime accordingly to your resource. I have a whole blogpost on that topic alone: https://tkdodo.eu/blog/react-query-as-a-state-manager

React Query refetching data when changing routes in nextjs

3 Answers3