Next.js SSR - navigating away from page (with useQuery on page) invalidates data and causes error

[jinsley8]

I have prefetching setup with getServerSideProps in Next.js.

When I'm on the SSR page (Page 1) my useQuery hook returns the data.

When I navigate to a new page (Page 2), the useQuery data on Page 1 changes to undefined and shows the error on page 2.

Page 1 error is TypeError: Cannot read properties of undefined (reading '0') - the data array is no longer available when during page change. The data fetched changes to invalid when I click on the other Page 2 link.

Any idea how I can fix this?

It seems like this happens only when I navigate from SSR page to non-SSR page.

It doesn't happen navigating to other pages with the same route. /page/${id}

import type { GetServerSideProps, NextPage } from 'next';
import { useRouter } from 'next/router';
import { QueryClient, dehydrate } from '@tanstack/react-query';

const Nft: NextPage = () => {
  const {
    query: { id },
  } = useRouter();

  const { data: getNftData, isLoading: isDataLoading } = useNftData(
    id as string
  );
  const nftData = getNftData[0]; // CAUSING THE ERROR

  if (isLoading) {
    return (
      <Loading  />
    );
  }

  return (
    <MainPage nftData={nftData} />
  );
};

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const { id } = ctx.params as { id: string };

  const queryClient = new QueryClient();

  let isError = false;

  const getNftData = async (id: string) => {
    try {
      / .......
      return data;
    } catch (err) {
      console.error(err);
    }
  };

  try {
    await queryClient.prefetchQuery(['nft', id], () => getNftData(id));
  } catch (err) {
    isError = true;
    ctx.res.statusCode = err?.response?.status;
  }

  return {
    props: {
      isError,
      // dehydrate query cache
      dehydratedState: dehydrate(queryClient),
    },
  };
};

export default Nft;

[TkDodo]

not sure what you're talking about tbh. please show a codesandbox reproduction

[jinsley8]

I just recreated a simplified version in codesandbox and the same issue doesn't happen. I'll have to debug my project further.