Theo's Typesafe Cult•2y ago

Pattern for Prisma Generated Types are not Serializable

I'm looking for a pattern that will help me deal with the types Prisma generates that are not serializable. The primary culprit is columns with a DateTime type which translates to the Date type on a TypeScript type. The is either at build time using GetStaticProps or run time using GetServerSideProps. And the error will be

Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Example Prisma model that causes this problem:

model Example {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  name      String
  message   String
}

model Example {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  name      String
  message   String
}

React Page component that causes the error:

type FetchAtBuildProps = {
  example: Example;
};

// The component itself.
export default function FetchAtBuild({
  example
}: FetchAtBuildProps) {
  return (
    <div>
      <h1>{example.name}</h1>
      <p>{example.message}</p>
      <p>Created at: {example.createdAt.toDateString()}</p>
      <p>Updated at: {example.updatedAt.toDateString()}</p>
    </div>
  );
}

export const getStaticProps: GetStaticProps<FetchAtBuildProps> = async () => {
  try {
    const example = await prisma.example.findFirst({
      where: {
        name: "Example",
      },
    });

    if (!example) {
      throw new Error("Example not found");
    }

    return {
      props: {
        example,
      },
    };
  } catch (error) {
    console.log(error);
    throw error;
  }
};

type FetchAtBuildProps = {
  example: Example;
};

// The component itself.
export default function FetchAtBuild({
  example
}: FetchAtBuildProps) {
  return (
    <div>
      <h1>{example.name}</h1>
      <p>{example.message}</p>
      <p>Created at: {example.createdAt.toDateString()}</p>
      <p>Updated at: {example.updatedAt.toDateString()}</p>
    </div>
  );
}

export const getStaticProps: GetStaticProps<FetchAtBuildProps> = async () => {
  try {
    const example = await prisma.example.findFirst({
      where: {
        name: "Example",
      },
    });

    if (!example) {
      throw new Error("Example not found");
    }

    return {
      props: {
        example,
      },
    };
  } catch (error) {
    console.log(error);
    throw error;
  }
};

Prisma can't generate the DateTime type as a date string: https://github.com/prisma/prisma/discussions/5522 I can just create duplicate types that mirror the Prisma types but with Date fields replaced with String fields. This really sucks. I don't want to manage multiple copies of types. My goal: Be able to run a prisma query(from GetServerSideProps or GetStaticProps) and pass the resulting value directly to my page props using the types generated from my schema.

1 Reply

HunterOP•2y ago

I really just do not want to: Have to define duplicate types that match what prisma generates. Where the only difference is that Date fields are converted to string fields. Are there any work arounds for this? Patterns? Ideas? Or maybe I just need to manage my own types and deal with converting between prisma and custom types. I can do this, I just really do not want to unless there's nothing else.

Gaming

Programming

Pattern for Prisma Generated Types are not Serializable