DateTime in lucid give JSDate on react with inertia

[benjibenoit]

Hi guys,

I created a model for my Orders like this :

export default class Order extends BaseModel {
  @column({ isPrimary: true })
  declare id: UUID

  @column()
  declare status: IOrderStatus

  @column.dateTime()
  declare expiredAt?: DateTime

  @column.dateTime({ autoCreate: true })
  declare createdAt: DateTime
}

I'm passing the order in my react page using Inertia and I try to write a comprehensible date with this code :

<TableCell className="text-100 flex justify-between items-center flex-row">
       {order.createdAt.toFormat('dd LLL yyyy')}
</TableCell>

This code should work since order.createdAt is of type DateTime. But I have an error in the browser

TypeError: order.createdAt.toFormat is not a function

When I write order.createdAt.toString() i have 2024-10-11T08:58:21.164+00:00. This date looks like a Date() from js.

I can't set a format for my date using Luxon on react. Am I doing something wrong?

Thanks for your time!

[RomainLanz]

Hey @shankiflang! 👋🏻

It is because your date is being serialized when sent to Inertia (since your React application run on the client, not on the server).

You have to create another instance on the client if you want to use Luxon there.

[benjibenoit]

Oh I see, i didn't know that Inertia was serializing like that.

I tried many things without success. Do you have an fast example for creating an instance? Because as I use the model type in react, createdAt type is DateTime, even in react. so it doesn't allow me to do DateTime.fromXXX for example

[thetutlage]

The cleanest solution is to not use models as types in your frontend code and instead create serializers and DTO's. All data that goes over HTTP will be serialized and hence it will never match the rich data-types you have on the server.

[Julien-R44]

I'd also suggest using the InferPageProps or Serialize type helpers, which help avoiding this kind of error. Basically, it will "serialize at type-level". For example:

import { Serialize } from '@tuyau/utils/types'

interface Post {
 createdAt: DateTime
}

type SerializedPost = Serialize<Post>
// ^ { createdAt: string }

Same behavior with InferPageProps, which use Serialize internally.
But still important to make DTO's / Serializers as suggested by Aman

See https://docs.adonisjs.com/guides/views-and-templates/inertia#type-level-serialization