How to hydrate client-side models?

[hackel]

I've finally decided to dive into Inertia and am struggling with this formerly trivial aspect of my frontend app designs. I need to convert the incoming JSON data into a (typescript) model, cast attributes (e.g. dates) into the appropriate types, etc. I want to do this to make sure everything is properly typed and for proper separation of any entity-specific logic, just like we do on the backend.

I see that there used to be a transformProps option that has been removed. I've seen it suggested to use a proxy component to receive the props from Inertia, transform them there, and then pass them on to the "real" page component. This seems quite convoluted and like a lot of extra work and boilerplate. Is there any better solution? I thought about using an axios response interceptor, but that seems hackish to the point where I'm not even sure it would be possible.

Without Inertia, I would have a vuex action that called an API service, retrieved the JSON data, hydrated the models, and returned them to the vuex store where they could be used in page components. Is this simply not done with Inertia? Do most people just use plain, old javascript objects for everything? If there is any solution I'm missing I would love to hear about it!

[ajnsn]

Hey @hackel
in my Vue 3 projects I partially use Pinia and Inertia's events. You can easily maintain a store this way.

As Inertia is mostly backend-driven, I typically prepare the data already within the backend, e.g. via Laravel's API Resources.

[mohkoma]

This maybe a bit late but I made a small package that allows you to transform the inertia's props before receiving them in the component (A replacement for transformProps ).
https://github.com/mohkoma/inertiajs-transform-props