Blitz: Datetime type with Prisma does not work with getServerSideProps

Created on 4 May 2020 · 13Comments · Source: blitz-js/blitz

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

kinbug needs investigation scopserver statudone

Source

gielcobben

All 13 comments

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

merelinguist on 25 May 2020

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

gielcobben on 25 May 2020

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 },
      ],
    },
  },
})

merelinguist on 25 May 2020

😕1

Thank you, this helps a lot 🙏

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

gielcobben on 25 May 2020

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 on 25 May 2020

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 on 2 Jun 2020

👍1

(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.)

merelinguist on 2 Jun 2020

@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