Datetime type with Prisma does not work with getServerSideProps #469

gielcobben · 2020-05-04T08:29:32Z

What is the problem?

The tutorial uses publishedAt DateTime in the Prisma schema. When I re-write app/questions/pages/[id].tsx to use getServerSideProps it's throwing and error:

Error serializing `.questions[0].publishedAt` returned from `getServerSideProps` in "/questions/[id]". Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Steps to Reproduce:

Follow the tutorial.
Replace the code in app/questions/pages/[id].tsx with:

import { Head, Link, ssrQuery } from "blitz"
import getQuestions from "app/questions/queries/questions/getQuestions"

export const getServerSideProps = async ({ params, req, res }) => {
  const questions = await ssrQuery(getQuestions, { where: { id: parseInt(params.id) } }, { req, res })
  return { props: { questions } }
}

const ShowQuestionPage = ({ questions }) => {
  console.log(questions)

  return (
    <div className="container">
      <Head>
        <title>Question</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <p>
          <Link href="/questions">
            <a>Questions</a>
          </Link>
        </p>
      </main>
    </div>
  )
}

export default ShowQuestionPage

The following error occurs:

Error serializing `.questions[0].publishedAt` returned from `getServerSideProps` in "/questions/[id]". Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

Versions:

debug: local
debug: pkgPath: test/node_modules/@blitzjs/cli

macOS Catalina | darwin-x64 | Node: v12.16.1

blitz: 0.8.1 (global)
blitz: 0.8.1 (local)

Supporting Documentation

The text was updated successfully, but these errors were encountered:

merelinguist · 2020-05-24T22:36:02Z

Have run into this several times now. Still not sure if there’s an easy way to fix.

gielcobben · 2020-05-25T11:29:18Z

So, what would you recommend for Datetime in Prisma / Blitz (for now)?

merelinguist · 2020-05-25T15:05:10Z

As a long-term solution, we’ll probably have to work that out somewhere within Blitz. For your purposes, though I’d recommend either:

Not using SSR, or
Just using a plain Int type in your Prisma schema. This would look something like this:

model Question {
  id          Int      @default(autoincrement()) @id
  text        String
  publishedAt Int
  choices     Choice[]
}

Then, when you’re creating your Question, set the publishedAt field to use a number, not a date object, like this:

const question = await createQuestion({
  data: {
    text: event.target[0].value,
    publishedAt: new Date().getTime(),
    choices: {
      create: [
        { text: event.target[1].value },
        { text: event.target[2].value },
        { text: event.target[3].value },
      ],
    },
  },
})

gielcobben · 2020-05-25T16:16:42Z

Thank you, this helps a lot 🙏

Do you know if this recommendation has any implications for ordering or filtering?

merelinguist · 2020-05-25T21:28:42Z

Glad that helped @gielcobben! For filtering, you’d do this:

import db from "db"

// e.g. 1591115990258
const date = new Date().getTime()

const questions = await db.question.findMany({ where: { publishedAt: date } })

To order, you’d do this:

import db from "db"

const questions = await db.question.findMany({ orderBy: { publishedAt: "asc" } })

merelinguist · 2020-06-02T16:39:59Z

Investigated this a bit more, and since this is essentially built into Next as a feature, I don’t think it can be “solved” beyond using something like the solution above.

merelinguist · 2020-06-02T16:42:50Z

(See also the GUI for another example of a Blitz app which casts the date to an Int to avoid Next’s rehydration problems in this area.)

osirvent · 2020-06-07T16:08:03Z

@merelinguist Shouldn't we use Float instead of Int on Prisma Schema?
If Int is used it appears a negative number on the Postgres table. I think it is because of Int precision

flybayer · 2020-06-08T11:49:20Z

I recommend using String with ISO date format instead of a number.

hauptrolle · 2020-07-30T17:34:07Z

Is there a solution yet?

flybayer · 2020-08-02T18:44:17Z

@hauptrolle yes!

Use the superjson library.

See the docs on using with getServerSideProps here

phoshenwen · 2020-10-28T17:21:20Z

Facing the same problem, just updating @flybayer's link

flybayer · 2020-10-28T18:19:03Z

Fyi, we have an open issue to add this to blitz core: #750

ref: - https://codegregg.com/tinywins/2021/nextjs-date-type-static-props/ - https://github.com/blitz-js/blitz/issues/416

simondebbarma added kind/bug scope/server status/ready-to-work-on status/triage labels May 4, 2020

flybayer changed the title ~~Serializing Datetime type in Prisma is not working server-side.~~ Datetime type with Prisma does not work with getServerSideProps May 25, 2020

flybayer added needs investigation and removed status/triage labels May 25, 2020

merelinguist closed this as completed Jun 3, 2020

blitzjs-bot bot added status/done and removed status/ready-to-work-on labels Jun 3, 2020

simonedelmann mentioned this issue Jul 7, 2022

Serialization Error: Dates should still be of type Date after useQuery #695

Closed

osirvent mentioned this issue Jun 20, 2020

[legacy-framework] Add initial serializer blitz-js/blitz#707

Closed

2 tasks

shimbaco referenced this issue in shimbaco/shimba.co Jan 9, 2022

Add babel-plugin-superjson-next for Prisma's DateTime field

1d6895a

ref: - https://codegregg.com/tinywins/2021/nextjs-date-type-static-props/ - https://github.com/blitz-js/blitz/issues/416

carbontwelve mentioned this issue Feb 10, 2022

Unable to use DateTime type from Prisma in next.js getStaticProps likepie/website#4

Closed

itsdillon transferred this issue from blitz-js/blitz Jul 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datetime type with Prisma does not work with getServerSideProps #469

Datetime type with Prisma does not work with getServerSideProps #469

gielcobben commented May 4, 2020

merelinguist commented May 24, 2020

gielcobben commented May 25, 2020 •

edited

Loading

merelinguist commented May 25, 2020 •

edited

Loading

gielcobben commented May 25, 2020

merelinguist commented May 25, 2020 •

edited

Loading

merelinguist commented Jun 2, 2020

merelinguist commented Jun 2, 2020

osirvent commented Jun 7, 2020 •

edited

Loading

flybayer commented Jun 8, 2020

hauptrolle commented Jul 30, 2020

flybayer commented Aug 2, 2020

phoshenwen commented Oct 28, 2020

flybayer commented Oct 28, 2020

Datetime type with Prisma does not work with getServerSideProps #469

Datetime type with Prisma does not work with getServerSideProps #469

Comments

gielcobben commented May 4, 2020

What is the problem?

Steps to Reproduce:

Versions:

Supporting Documentation

merelinguist commented May 24, 2020

gielcobben commented May 25, 2020 • edited Loading

merelinguist commented May 25, 2020 • edited Loading

gielcobben commented May 25, 2020

merelinguist commented May 25, 2020 • edited Loading

merelinguist commented Jun 2, 2020

merelinguist commented Jun 2, 2020

osirvent commented Jun 7, 2020 • edited Loading

flybayer commented Jun 8, 2020

hauptrolle commented Jul 30, 2020

flybayer commented Aug 2, 2020

phoshenwen commented Oct 28, 2020

flybayer commented Oct 28, 2020

gielcobben commented May 25, 2020 •

edited

Loading

merelinguist commented May 25, 2020 •

edited

Loading

merelinguist commented May 25, 2020 •

edited

Loading

osirvent commented Jun 7, 2020 •

edited

Loading