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

WWasp

•Created by Hunter on 6/16/2023 in #🙋questions

Does Wasp support MySQL?

Clearly PrismaJS does. Looking at wasps docs on databases: https://wasp-lang.dev/docs/language/features#database It says clearly that either sqlite or postgresqlcan be used. Is the documentation just missing or is MySQL truly not supported by wasp? My hope is to use planetscale.com to host our database. And it is based on MySQL so that may be an issue.

15 replies

Gaming

Programming