adverse-sapphire

React Query SSR with NextJS

Hi guys, I need some help. I'm using React Query with NextJS and I want to cache data returned from a call on one page when visiting another page of my app, so that my API is called only on the 1st page Here's my app setup:

  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            staleTime: 1000 * 30,
          },
        },
      })
  );

  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            staleTime: 1000 * 30,
          },
        },
      })
  );

I'm using hydration. I put a log on my API and unfortunately whenever I visit the 1st page, I see the API gets called and when I visit the 2nd page I see the call getting fired again. What am I missing? // page1.ts in getServerSideProps:

const queryClient = new QueryClient();
    await queryClient.fetchQuery(['varA'], () =>
      myClient.getValues()
    );
...
return {
      props: {
        client: JSON.parse(JSON.stringify(monolithClient)),
        dehydratedState: dehydrate(queryClient),

...
in the component:
  const { data } = useQuery(
    ['varA'],
    myClient.getValues
  );

const queryClient = new QueryClient();
    await queryClient.fetchQuery(['varA'], () =>
      myClient.getValues()
    );
...
return {
      props: {
        client: JSON.parse(JSON.stringify(monolithClient)),
        dehydratedState: dehydrate(queryClient),

...
in the component:
  const { data } = useQuery(
    ['varA'],
    myClient.getValues
  );

And I have a similar implementation on the 2nd page

9 Replies

adverse-sapphire•4y ago

getServerSideProps is called on every client side navigation as well. This is intentional, as getServerSideProps was never meant to be a good solution to "seed" client side caches. Apparently, things will get better with the new nextJs router they are currently working on. Some resources can be found here: - https://twitter.com/TkDodo/status/1558752788393476096 - https://github.com/vercel/next.js/discussions/19611

Dominik 🇺🇦 (@TkDodo)

I can't believe there is no real solution in @nextjs for this: https://t.co/1RltC0OR9O Consider: - You prefetch page 1 of an infiniteQuery on the server - You load more pages on the client - navigate away and back - gSSP will run again, fetch page 1 and overwrite the client cache

Twitter

GitHub

Add option to disable getServerSideProps on client-side navigation ...

Feature request Is your feature request related to a problem? Please describe. Function getServerSideProps runs on every request and there is no way to use apollo existing cache to load data from o...

optimistic-gold•4y ago

https://dev.to/arianhamdi/react-query-v4-ssr-in-next-js-2ojj This guide helped me achieve what youre looking for! Hope it helps you too

DEV Community 👩‍💻👨‍💻

React Query v4 + SSR in Next JS

SSR data fetching + caching mechanism is a bit tricky in next js. In this article, we will learn how...

optimistic-gold•4y ago

You have to do a hacky way to disable SSR on client side navigation But it works well!

adverse-sapphireOP•4y ago

@Deleted User thank you. Funny fact, I checked the exact same post but just now saw - 5. with-CSR HOC. I’ll try that tomorrow. I guess this is the hack you’re talking about. Isn’t there any other proper,’officially’ recommended solution instead of such hacks? Or am I asking too much from React Query?

optimistic-gold•4y ago

its not an issue with react query its more of an issue with NextJS The way the nextjs router handles getServerSideProps is not ideal But apparently in the next 'nextjs' version theyll have a better approach

adverse-sapphireOP•4y ago

I see. Will give it a try. Thanks and looking forward to the next nextjs version

optimistic-gold•4y ago

Same man! Im in the same situation as you But so far this has been working great for me

adverse-sapphireOP•4y ago

@Deleted User and anyone else, I did try this solution. It worked in the sense that it didn’t refetch data when I went from pageA to pageB. But it also didn’t respect my stale and cache times, meaning it didn’t refetch data (as I would expect) when I went from pageA —> pageB after the staleTime passed. Is that a side effect of the hacky implementation I can’t get past ?

adverse-sapphire•4y ago

no this should work - the fetch should just happen on the client side then

Gaming

Programming

React Query SSR with NextJS

Did you find this page helpful?