How Can I Resolve Livewire Pagination Serialization Issues in Laravel?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm running into issues with pagination in Livewire. My dashboard updates the main-content area based on a sidebar link click, and while everything generally works, the paginated data is causing errors.

Here is the code that renders the main content:

HTML
<div class="main-content" wire:key="{{ $currentContent }}">
   @livewire($currentContent, key($currentContent))
</div>

My Livewire component fetches the data, paginates it, and passes it to the view as follows:

PHP
<?php

namespace App\Livewire\Pro\Dashboard;

use Livewire\WithPagination;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Pagination\LengthAwarePaginator;

class Earnings extends Component
{

    use WithPagination;

    public $bookings;
    public $stats;
    public $pagination;
    public $paginationLinks;
    public $totalBookings;

    public function mount() {

        $this->bookings = [];

    }

    public function render()
    {

        $this->bookings = Auth::user()->cleaner->bookings()
        ->with([
            'cleanType:id,name',
            'availabilities' => function($query) {
                $query->limit(1); // Restrict to the first availability
            },
            'customer.user:id,first_name,surname'
        ])
        ->where('status', '!=', 'pending')
        ->orderBy('date', 'desc')
        ->paginate(5);

        return view('livewire.pro.dashboard.earnings', ['bookings' => $this->bookings]);

    }

}

I then encounter an error along with a dump of my paginated object:

BASH
Property type not supported in Livewire for property:

The Blade file appears to be set up correctly—I can dd($bookings) and see the data—but the @foreach loop is not executed.

Has anyone encountered this issue or have any suggestions for resolving it?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Livewire can’t serialize certain objects (like Laravel’s paginator) when they're assigned to public properties. In your component, assigning the paginator instance to the public property $bookings causes Livewire to complain that it “Property type not supported.” Since Livewire re-renders and serializes component properties, you should avoid storing non-serializable objects like a LengthAwarePaginator in a public property.

To fix this, you can simply retrieve and pass the paginated results directly from the render() method without setting them on a public property. For example:

PHP
<?php

namespace App\Livewire\Pro\Dashboard;

use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Support\Facades\Auth;

class Earnings extends Component
{
    use WithPagination;

    // Remove $bookings from public properties

    public function render()
    {
        $bookings = Auth::user()->cleaner->bookings()
            ->with([
                'cleanType:id,name',
                'availabilities' => function($query) {
                    $query->limit(1); // Restrict to the first availability
                },
                'customer.user:id,first_name,surname'
            ])
            ->where('status', '!=', 'pending')
            ->orderBy('date', 'desc')
            ->paginate(5);

        return view('livewire.pro.dashboard.earnings', ['bookings' => $bookings]);
    }
}

Now, in your Blade view you can safely loop through the paginated results:

BLADE
<div>
    @foreach($bookings as $booking)
        <!-- Display booking data -->
    @endforeach

    {{ $bookings->links() }}
</div>

This approach avoids storing the paginator object on a public property, allowing Livewire to correctly serialize and update your component.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by AstralKeeper660 • 1 month ago

I modify into the code, try to add the updated functionality from this:

Earnings.php:

PHP
 namespace App\Livewire\Pro\Dashboard;

use Livewire\WithPagination;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use Illuminate\Pagination\LengthAwarePaginator;

class Earnings extends Component
{
    use WithPagination;

    public $bookings;
    public $perPage = 5;
    public $currentPage;

    public function mount()
    {
        $this->currentPage = request()->get('page', 1);
    }

    public function render()
    {
        // Get the query results
        $query = Auth::user()->cleaner->bookings()
            ->with([
                'cleanType:id,name',
                'availabilities' => function($query) {
                    $query->limit(1);
                },
                'customer.user:id,first_name,surname'
            ])
            ->where('status', '!=', 'pending')
            ->orderBy('date', 'desc');

        // Get total count
        $total = $query->count();

        // Get paginated results
        $results = $query->skip(($this->currentPage - 1) * $this->perPage)
                        ->take($this->perPage)
                        ->get();

        // Create LengthAwarePaginator instance
        $this->bookings = new LengthAwarePaginator(
            $results,
            $total,
            $this->perPage,
            $this->currentPage,
            [
                'path' => request()->url(),
                'query' => request()->query(),
            ]
        );

        return view('livewire.pro.dashboard.earnings', [
            'bookings' => $this->bookings
        ]);
    }

    // Handle page changes
    public function setPage($page)
    {
        $this->currentPage = $page;
    }
}

blade file:

BLADE
    <div>
        @if($bookings->count())
            @foreach($bookings as $booking)
                {{-- Booking details here --}}
            @endforeach
    
            @if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="disabled"><span>&laquo;</span></li>
            @else
                <li><a wire:click="setPage({{ $paginator->currentPage() - 1 }})">&laquo;</a></li>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="active"><span>{{ $page }}</span></li>
                        @else
                            <li><a wire:click="setPage({{ $page }})">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li><a wire:click="setPage({{ $paginator->currentPage() + 1 }})">&raquo;</a></li>
            @else
                <li class="disabled"><span>&raquo;</span></li>
            @endif
        </ul>
    </nav>
@endif
            <div>
                {{ $bookings->links() }}
            </div>
        @else
            <p>No bookings found.</p>
        @endif
    </div>

Add @persist directive if needed for state preservation:

BLADE
<div wire:key="{{ $currentContent }}">
    @persist('earnings')
        @livewire($currentContent, key($currentContent))
    @endpersist
</div>

No comments yet.

Discussion

No comments yet.

How Can I Resolve Livewire Pagination Serialization Issues in Laravel?

2 Answers

Discussion

Similar Posts

Livewire 3 Pagination Displays Incomplete Data and Missing Buttons on Certain Pages