Hunter Posts - Answer Overflow

Hunter

Explore posts from servers

•Created by Hunter on 7/27/2023 in #questions

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.

3 replies

Gaming

Programming