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

TanStack•4y ago•

13 replies

dead-brown

React Query SSR with NextJS

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

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

React Query SSR with NextJS

Similar Threads

React Query SSR with NextJS

Similar Threads

Similar Threads

Similar Threads