T
TanStack•3y ago
future-harlequin

Not updating data on route change

I'm using NextJS, and for some reason the fetched data not getting updated on route change. For example, if i navigate to test/1 page, loads the data with id 1, but if i navigate from here to test/100 the data still the same. On codesandbox this code working without any issues, but if i try on VSCode its just broken. The code looks like this: 
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
  const id = ctx.query.id;
  const mediaData = await getMedia(id);
  if (mediaData.errors) {
    return {
      notFound: true
    };
  }
  return {
    props: {
      testData: mediaData
    }
  };
export default function TestPage({ testData }: any) {
  const router = useRouter();
  const { data: mediaData, isLoading } = useQuery({
    queryKey: ["mediaData", router.query.id],
    queryFn: () => getMedia(router.query.id),
    initialData: testData,
    staleTime: 60 * 1000,
  });
  return (
     ...
  );
}
}
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
  const id = ctx.query.id;
  const mediaData = await getMedia(id);
  if (mediaData.errors) {
    return {
      notFound: true
    };
  }
  return {
    props: {
      testData: mediaData
    }
  };
export default function TestPage({ testData }: any) {
  const router = useRouter();
  const { data: mediaData, isLoading } = useQuery({
    queryKey: ["mediaData", router.query.id],
    queryFn: () => getMedia(router.query.id),
    initialData: testData,
    staleTime: 60 * 1000,
  });
  return (
     ...
  );
}
}
And as you can see in the Data Explorer, the data is completely wrong. I appreciate any help.
No description
1 Reply
afraid-scarlet
afraid-scarlet•3y ago

Did you find this page helpful?