Livewire fullpage lazy loading generates an error

Hello,

I have added ->lazy() after the route declaration and I have declared a placeholder in the livewire configuration file (and sure created the placeholder view in the views/livewire folder.

'lazy_placeholder' => 'livewire.placeholder',

The route looks like this.

Route::get('products', ProductsPage::class)->lazy();

When I activate lazy loading, I get this error.

Property type not supported in Livewire for property: [{}]

Have you already had this error ? Have any idea why ?

Can somebody try and tell me if it works ?

I wonder if it's not a bug, it has already been reported one year ago on github, but still not resolved.

Thanks for your help.

vincent15000

1 year ago

Level 63

I just solved a part of the problem.

Here is the whole Livewire component.

public $products;

public function mount(ProductService $productService)
{
    $this->products = collect($productService->getProducts())->map(function ($product) {
        return [
            'id' => $product['id'],
            'name' => $product['name'],
            'price' => $product['prices'][0]['price'],
        ];
    });
}

public function render()
{
    return view('livewire.products-page');
}

If $products is a public property, the error is generated.

But if I change the code to this, I don't get any error and the page loads fine. But it loads only when the datas are loaded, that means that lazy loading doesn't work.

public function render()
{
   $products = collect((new ProductService)->getProducts())->map(function ($product) {
		return [
            'id' => $product['id'],
            'name' => $product['name'],
            'price' => $product['prices'][0]['price'],
        ];
    });

    return view('livewire.products-page', compact('products'));
}

But I'm quite sure that if I want lazy loading, I need the first version of the code with a public property, because in the last version, the getProducts() method (which calls an third-party API) stops the code execution and the view is returned only when the datas are retrieved.

Can you confirm my analysis ?

Chingy

1 year ago

Best Answer

Level 6

@vincent15000 Try making it a Computed property, so that you don't re-query every time.

Plus, check if you have disabled the legacy binding setting. Generally, now, in LW3, i have noticed that public properties bound to models and other "advanced" types other than primitives the docs suggest, it leads to sometimes weird behaviour.

I personally have switched almost all my properties (that can be switched in each case) into computed properties. Much faster, some caching as well.

1 like

vincent15000

1 year ago

Level 63

@Chingy Thank you ... effectively I don't the error any more after having switched the $products to a computed property.

But the lazy loading doesn't occur, the page is loaded only when the datas are loaded.

vincent15000

1 year ago

Level 63

@Chingy That's ok, it works now.

But ... specifying ->lazy() to the route doesn't work, only the #[Lazy] is working fine.

Chingy

1 year ago

Level 6

@vincent15000 Sorry, I am not quite versed to the tricks of LW3. I read the docs and it's pretty much like doing defer loading (LW2)

You can add a wire:init="yourFunction()" in your blade that will defer load. Which means will execute a function after the div gets rendered. So what can this offer you? You do this

public bool $productsLoaded = false;

public function yourFunction()
{
	$this->productsLoaded = true;
}


public function render()
{
	return view('blade.file', [
		'products' => $this->productsLoaded ? $this->products : collect([])	
	])
}
// OR

#[Computed]
public function products() 
{
	return $this->productsLoaded ? $yourQueryHere : collect([])
}

What this will do is actually query the products and load them only after loading the page. Kinda like the Lazy thing LW3 adds, but I like this way more since it gives you 100% control

And in the front end you can do a @forelse and add a skeleton while waiting :)

1 like

Please or to participate in this conversation.