[LiveComponent] How to use a DTO instead of an entity

[benr77]

I've just been playing around with the Live Component functionality. It's basically totally awesome, but I got completely stuck when trying to use a form data class instead of an entity.

I see in #102 there is a note about Document using a DTO is a LiveProp / the dehydration system.. This is exactly what I'm stuck on trying to use a DTO rather than an entity, and getting an error message saying something like "dehydration not available".

Can anyone point me in the right direction? If I can get it working I will do a PR to update the readme with the new info. Thanks

[benr77]

@weaverryan Please could I bug you for a pointer on this? Thanks.

[weaverryan]

I think the key is that you will need a custom dehydrator for your DTO. Well, it depends, there are two paths:

1. When creating your component, you pass in some raw data - e.g. { name: 'ryan', isNamedRyan: true }. Then, inside your component, you use this data to create the DTO inside of instantiateForm() and pass it directly to your form. In this situation, your DTO does not need to be set onto a property and dehydrated/hydrated.

2. If this doesn't work (because you want to be able to pass the already-instantiated DTO into your component), then you'll need a custom dehydrator for it. You can use these 2 options inside LiveProp to set a custom hydrator/dehydrator to a method on your component -

   ux/src/LiveComponent/src/Attribute/LiveProp.php

   Lines 25 to 27 in 4e7cd8c

   	private ?string $hydrateWith;
   	private ?string $dehydrateWith;

   - I think these options are not-yet-documented.

[kbond]

With #162, I believe a custom hydrator is no longer required.

[benr77]

Confirmed. This is now working with the latest commits from #162