2 replies

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

DateTime

type which translates to the

Date

Date

type on a TypeScript type.

The is either at build time using

GetStaticProps

GetStaticProps

or run time using

GetServerSideProps

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

Date

fields replaced with

String

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.

TTC

Theo's Typesafe Cult•3y ago•

2 replies

Hunter

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

DateTime

type which translates to the

Date

Date

type on a TypeScript type.

The is either at build time using

GetStaticProps

GetStaticProps

or run time using

GetServerSideProps

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

Date

fields replaced with

String

String

Pattern for Prisma Generated Types are not Serializable

Pattern for Prisma Generated Types are not Serializable

Similar Threads

Similar Threads

Similar Threads