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
Hunter
Hunter16mo 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.
Want results from more Discord servers?
Add your server