rare-sapphire

Error dehydrating data with dates

I get this following error when I try to prefetch data in my next12 getServerSideProps. What can I do? my data has date properties which are not abled to be parsed

export async function getServerSideProps(context) {
  const queryClient = new QueryClient();

  const session = await getSession(context);

  if (!session) {
    return redirectObject('/login');
  }

  await queryClient.prefetchQuery(['someData'], () =>
    getSomeData(session?.user?.someId)
  );

  return {
    props: {
      session,
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export async function getServerSideProps(context) {
  const queryClient = new QueryClient();

  const session = await getSession(context);

  if (!session) {
    return redirectObject('/login');
  }

  await queryClient.prefetchQuery(['someData'], () =>
    getSomeData(session?.user?.someId)
  );

  return {
    props: {
      session,
      dehydratedState: dehydrate(queryClient),
    },
  };
}

3 Replies

united-yellow•3y ago

Looks like nextjs doesn't support Date objects returned from getServerSideProps (see this github issue: https://github.com/vercel/next.js/issues/13209#issuecomment-633149650). You can probably fix it by converting the date to a timestamp. See also here: https://tanstack.com/query/latest/docs/react/reference/hydration#limitations

hydration | TanStack Query Docs

dehydrate dehydrate creates a frozen representation of a cache that can later be hydrated with Hydrate, useHydrate, or hydrate. This is useful for passing prefetched queries from server to client or persisting queries to localStorage or other persistent locations. It only includes currently successful queries by default.

GitHub

getServerSideProps Fails to Serialize Date Object · Issue #13209 · ...

Bug report Describe the bug When passing a date over the getServerSideProps boundary, it fails to serialize the Date object. Dates are serializable, so they should be allowed through. To Reproduce ...

rare-sapphireOP•3y ago

thanks a lot! i've used the babel-next-superjson thingy and it worked. I didn't have a babelrc before so I added it, I hope it doesn't cause any problems

united-yellow•3y ago

Glad it worked! Alternatively, if you don't want the extra dependencies, you can probably patch the data returned by getSomeData() and convert those dates to numbers (using date.valueOf() ) or to strings (using date.toISOString()).

Gaming

Programming

Error dehydrating data with dates

Did you find this page helpful?