CODEWITHSUNDEEP
reactjsnext.jsreact-query
Gayatri Dipali
Gayatri Dipali

Reputation: 1283

react-query refetches data on page change in nextjs

I'm working on a project named goloop with serverless backend hosten on vercel.

The frontend ( nextjs ) uses react-query hooks to fetch data. As it is a e-commerce site i am fetching all the products on my landing page and show a skeleton component while it's fetching data. The problem here is it refetch's the data every time when the page is changed which is kinda annyoing.

I am creating the client this way :

const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        staleTime: 60 * 1000 * 5,
        onError: (e) => {
          if ("message" in (e as Error)) {
            console.log((e as Error).message);
          }
        },
      },
    },
  });

If you need any further code please inform me or checkout the repo : https://github.com/lorstenoplo/eccom-next

The app is hosted here : https://goloop.vercel.app

Upvotes: 3

Views: 1776

Answers (1)

Nishanth Dipali
Nishanth Dipali

Reputation: 21

The easy fix is :

  1. adding a stale time
  2. Create a new queryCache and providing it in the client options
  3. Most importantly restart your server and ide

Upvotes: 2

Related Questions