Using laravel-data with Livewire

[trippo]

I'm using a data object in a complex livewire cart.
I saw a lot of limitations to using it and the documentation has a huge lack of information.

So I wrote this post to explain how I used it and to encourage a discussion.

For example purposes I use a Cart livewire controller, a CartItemData with a nested DataCollection of CartItemLicenseData:

class Cart extends Component
{
     /** @var array<string,CartItemData> */
    public array $items;
....
}

class CartItemData extends Data implements Wireable
{
    use WireableData;

    public function __construct(
        public int $id,
        public int $quantity,
        public string $name,
        public string $image,
        #[DataCollectionOf(CartItemLicenseData::class)]
        public DataCollection $licenses,
        ) {
    }

    public static function attributes(): array
    {
        return ['name' => __('general.name')];
    }

class CartItemLicenseData extends Data
{
    public function __construct(
        #[Max(50)]
        public string $firstname,
        #[Max(50)]
        public string $lastname,
        #[Email([Email::RfcValidation, Email::DnsCheckValidation])]
        public string $email,
    ) {
    }

    public static function attributes(): array
    {
        return [
            'firstname' => __('general.firstname'),
            'lastname' => __('general.lastname'),
            'email' => __('general.email'),
        ];
    }

1) Rules

After a lot o tries I can reuse the rules defined on Data Class Validation Attributes with this implementation:

protected function rules(): array
{
    return Arr::prependKeysWith(
        array: CartItemData::getValidationRules([]),
        prependWith: 'items.*.'
    );
}

The problem is the nested DataCollection object inside CartItemData that returns a Illuminate\Validation\NestedRules

...
     "licenses" => [
      "present",
      "array",
    ],
    "licenses.*" => Illuminate\Validation\NestedRules {#5879},
...

So I need to create rules of nested objects myself using these functions

$rules = array_merge(
    Arr::prependKeysWith(
            array: CartItemData::getValidationRules([]),
            prependWith: 'items.*.'
        ),
    Arr::prependKeysWith(
            array: CartItemLicenseData::getValidationRules([]),
            prependWith: 'items.*.licenses.*.'
        );
);

But I think getValidationRules() or a new rules() method must return a complete set of rules without having a parameter to pass on that.

2) Validation Attributes and Validation Message

Like getValidationRules() the package should have a getValidationAttributes() and getValidationMessages() that return recursively all attributes and messages from data objects and its nested objects.

For now, I have to create a function like this:

    protected function validationAttributes(): array
    {
        $path = \Spatie\LaravelData\Support\Validation\ValidationPath::create();
        return array_merge(
            collect(app()->call([CartItemData::class, 'attributes']))
                ->keyBy(fn(mixed $messages, string $key) => $path->property($key)->get())
                ->mapWithKeys(fn($attribute, $key) => ['items.*.' . $key => $attribute])
                ->all(),
            collect(app()->call([CartItemLicenseData::class, 'attributes']))
                ->keyBy(fn(mixed $messages, string $key) => $path->property($key)->get())
                ->mapWithKeys(fn($attribute, $key) => ['items.*.licenses.*.' . $key => $attribute])
                ->all(),
        );
    }

3) Rerendering page and Data manipulation needs a recreation of the Data Object

On the first render of the cart, the $item has a CartItemData type, but when I call a livewire function from the cart,
I need to reinitialize it with this function:

protected function getItemData(string $rowId): CartItemData
    {
        return CartItemData::from($this->items[$rowId]);
    }

because livewire transforms the object into an array.

And on the render function I need to reinitialize all the array items for every page rendering:

$this->items = array_map(fn($item) => CartItemData::from($item), $this->items);

There is a better approach to using Laravel-data on Livewire?

[alex-r-redfern]

Having the same issue of livewire converting the property to an array. Interestingly, it only seems to happen on nested livewire components.

[rubenvanassche]

But I think getValidationRules() or a new rules() method must return a complete set of rules without having a parameter to pass on that.

That's how it worked in v2, but this breaks nested validation, long read: (https://flareapp.io/blog/47-fixing-nested-validation-in-laravel)

Like getValidationRules() the package should have a getValidationAttributes() and getValidationMessages() that return recursively all attributes and messages from data objects and its nested objects.

You're always welcome to send in a tested + documented PR

Rerendering page and Data manipulation needs a recreation of the Data Object

Not sure if we can do anything about that, LiveWire has a lot of magic we can't work arround. @francoism90, if I'm not mistaken you're a bit the laravel-data with Livewire expert, maybe you can help?

[francoism90]

@rubenvanassche I'm far from an expert lol, but thanks for the mention. :)

I've kinda moved away from using 'data rules', as they are not flexible enough when using something like Livewire. It works great when building API's, but not so much when developing a more traditional Laravel app.

@trippo In a project, we use traits a lot:

// App\Concerns\WithPost.php

<?php

use Spatie\LaravelData\Support\Validation\ValidationContext;
use Spatie\LaravelData\Support\Validation\ValidationPath;

trait WithPost
{
    public PostData $post;

    public function mountWithPost(): void
    {
        $this->setPost(); // e.g. FindOrFail, etc., you could also use bootWithPost();
    }

    protected function postRules(): array
    {
        return Arr::prependKeysWith(
            array: PostData::rules($this->postValidationContext()),
            prependWith: 'post.'
        );
    }

    protected function postAttributes(): array
    {
        return Arr::prependKeysWith(
            array: PostData::attributes(),
            prependWith: 'post.'
        );
    }

    protected function postValidationContext(): ValidationContext
    {
        return new ValidationContext(
            payload: $this->post->toArray(),
            fullPayload: $this->all(),
            path: new ValidationPath(null),
        );
    }
}

To validate in a component, you may use something like this:

<?php

class PostEditComponent extends Component
{
    use WithPost;

    protected function rules(): array
    {
        return $this->postRules(); // you could overwrite this, merge them, etc.
    }

    protected function validationAttributes(): array
    {
        return $this->postAttributes();
    }

    public function render(): View
    {
        return view('..');
    }

    public function updated(mixed $propertyName): void
    {
        $this->validateOnly($propertyName);
    }

    public function submit(): void
    {
        // Validate request
        $this->validate();

        // Update model
        // ..
    }
}

One of disadvantages of this approve, is having to use the sometimes rule a lot and/or merge rules on the fly.

I would recommend using something like Filament Forms, and pass the data object to it's builder instead.

Hope this helps. :)

[trippo]

The main problem of my usage of Livewire is the DataCollection that it doesn't act like a DataObject, I resolve a lot of problems dividing the cart into sub-components

[linaspasv]

Unfortunately, Wireable is for DataObject and does not apply to DataCollection. I am struggling with the same problem. I guess the only solution is to manually convert your DataCollection to array on mount. It would ofcourse be nice if DataCollection could be Wireable too.

[francoism90]

@trippo @linaspasv https://laravel-livewire.com/docs/2.x/properties#wireable-properties

You could use this to keep the state type.

[linaspasv]

@trippo @linaspasv https://laravel-livewire.com/docs/2.x/properties#wireable-properties

You could use this to keep the state type.

Yeh, I use this for Data object with WireableData trait but for DataCollection I would probably need to wrap into another component that implements Wireable interface to work.