Prisma generated date type / Next.js and dates

[marceloverdijk]

I'm still experimenting with Next.js together with Prisma using TypeScript.
The first impression was good but now I came across some undesired behaviour.

As the Next.js page props are serialized as a JSON object it does not support dates.
When trying to pass a Prisma object with a date field in results in:
'object' ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Now I was looking at the Primas example using Next.js and I noticed that dates seem to be excluded, on purpose?
E.g the Post model has no date and the date fields in the User model are not queried...

Is this done on purpose? And is there small 'workaround' how to pass models with date using Next.js.

[ryands17]

Hey @marceloverdijk 👋

You're most probable facing an issue that Next.js has where it doesn't serialize the Date type.

I would suggest reading the below discussions/issues and the workaround is to stringify the date first and then set them in props.

vercel/next.js#11993
vercel/next.js#11498

[marceloverdijk]

Yes, I thought so.

Probably I have to create "JSON" DTO's for all my Prisma models and map queried objects to the DTO's.
These DTO instances can then be safely passed to Next.js.

Another option is to have a computed/virtual dateAsString property in the Prisma models and a way to exclude the actual date from the select. For both a github issues but not implemented yet. Although I must admit that would feel a bit hackish as well...
I really wonder which patterns other users are implementing to solve this. I mean every app has dates....

[ryands17]

I would suggest taking a look at how Blitz does it. It uses a custom library made by them called superjson and the perform the serialization automatically at the app layer. In this case as you're using vanilla Next.js, you would need to add the plugin and do not need to implement the serialization yourself which is awesome :)

[marceloverdijk]

Thx @ryands17 for pointing me to superjson. It's awesome and does exactly what I need!

[slugmandrew]

It's mid-2022 and I have just added superjson to my Next.js app... it was super easy (using the babel plugin), seems to work great and now I can use my prisma types in my Next.js pages.

Slightly surprised how long this has been an issue though.

[alex-zwingli]

Configuring superjson was a breeze and instantly solved this issue! Thank you so much for posting this @ryands17 🙏

[yahya-aghdam]

I converted the obj to json string then passed it to client. For other functions I converted the json to obj again in client.

I hope Next.js add this ability later!

[Talor-A]

You might be interested in blitzjs.com - specifically the library it uses under the hood for parsing JSON on the client: superjson

Edit: looks like blitz already got a shoutout in another thread :)

[nodexchange]

For anyone 'not-too-keen' on blitz reverse engineering exercise.

I did some basic remapping like this:

export async function getServerSideProps(context) {
  let users = await prisma.user.findMany({
    where: { paid: false },
    select: {
      email: true,
      paid: true,
      name: true,
      createdAt: true,
    },
  });
  users.map((item) => {
    item.createdAt = item.createdAt.toString();
  });

  return {
    props: {
      users,
      session: await getSession(context),
    },
  };
}

[bradgreens]

For anyone 'not-too-keen' on blitz reverse engineering exercise.

I did some basic remapping like this:

You can avoid manually identifying properties like createdAt by doing the following. In my case I had other properties which prisma is returning as Date.

  let listings = await prisma.listing.findMany({
    where: {
      userId: appUser.id,
    },
  });

  listings.forEach((listing) => {
    Object.entries(listing).forEach(([key, prop]) => {
      if (prop instanceof Date) {
        listing[key] = prop.toString();
      }
    });
  });

map isn't actually needed in this example since we're just mutating the original objects. But it'd probably be better to move this into an immutable helper function with map.

[im-paul-mak33]

Thanks for the help here you both, worked charm.

[im-paul-mak33]

    const listings = await prisma.listing.findMany({
      where: query,
      orderBy: {
        createdAt: 'desc',
      },
    });

    const safeListings = listings.map((listing) => ({
      ...listing,
      createdAt: listing.createdAt.toUTCString(),
    }));

Here is how I have done it, fetched the blog details and spefically stringified the creation date.
output - Sun, 10 Sep 2023 10:13:55 GMT

can find out more about the stringification of date on this link - here

[robchava]

The following code works for me, and preserves the types. This is from SO, but don't have the source:

type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & Pick<U, Extract<keyof U, keyof T>> extends infer O
  ? {
      [K in keyof O]: O[K];
    }
  : never;

export const recursivelySerializeDatesInObject = <T extends { updatedAt?: Date; createdAt: Date }>(
  obj: T
): Overwrite<T, { updatedAt: string; createdAt: string }> => {
  const retObj: any = { ...obj };

  if (obj.createdAt) {
    retObj.createdAt = obj.createdAt.toISOString();
  }

  if (obj.updatedAt) {
    retObj.updatedAt = obj.updatedAt.toISOString();
  }

  Object.keys(retObj).forEach((key) => {
    if (retObj[key] && typeof retObj[key] === `object`) {
      retObj[key] = recursivelySerializeDatesInObject(retObj[key]);
    }
  });

  return retObj as any;
};