php - How to use the pagination in Laravel Livewire with the Functional version not class - Stack Overflow

admin管理员组

文章数量:1287168

I'm just trying to follow the bootcamp for Laravel using Livewire : , so it have a note saying:

Returning all Chirps at once won't scale in production. Take a look at Laravel's powerful pagination to improve performance.

The original code in the functional version looks like:

<?php 

use App\Models\Chirp; 

use function Livewire\Volt\{state};

state(['chirps' => fn () => Chirp::with('user')->latest()->get()]); 

?>

<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">

@foreach ($chirps as $chirp)

    <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
        ...
    </div>

@endforeach 

</div>

Reading the documentation it only include examples for the "class version" like:

use Livewire\WithPagination;
use Livewire\Volt\Component;
use App\Models\Post;
 
new class extends Component {
    use WithPagination;
 
    public function with(): array
    {
        return [
            'posts' => Post::paginate(10),
        ];
    }
}

So I already tried importing the trait in the view like:

use Livewire\WithPagination;

$getChirps = fn () => $this->chirps = Chirp::paginate(10);

or

$getChirps = function () { 
    return $this->chirps = Chirp::with('user')->paginate(15);
};

And I'm getting the next error:

Property type not supported in Livewire for property: [{"current_page":1,"data":[{"id":1,"user_id":1,"message":"This chirp is a test","created_at":"2025-02-14T03:24:24.000000Z","updated_at":"2025-02-14T03:24:24.000000Z","user":{"id":1,"name":"Roberto","email":"[email protected]","email_verified_at":null,"created_at":"2025-02-09T14:10:52.000000Z","updated_at":"2025-02-09T14:10:52.000000Z"}}],"first_page_url":"http://127.0.0.1:8000/chirps?page=1","from":1,"last_page":1,"last_page_url":"http://127.0.0.1:8000/chirps?page=1","links":[{"url":null,"label":"« Previous","active":false},{"url":"http://127.0.0.1:8000/chirps?page=1","label":"1","active":true},{"url":null,"label":"Next »","active":false}],"next_page_url":null,"path":"http://127.0.0.1:8000/chirps","per_page":15,"prev_page_url":null,"to":1,"total":1}]

So the query to the DB is working and is getting the pages, but the error is something else, I already tried to find any specific example for the pagination in the functional version but don't have any luck.

Could be great if somebody can help me to understand how to fix this Property type not supported message, or understand if is not possible to use the pagination with the Functional version.

I'm just trying to follow the bootcamp for Laravel using Livewire : https://bootcamp.laravel/livewire/showing-chirps, so it have a note saying:

Returning all Chirps at once won't scale in production. Take a look at Laravel's powerful pagination to improve performance.

The original code in the functional version looks like:

<?php 

use App\Models\Chirp; 

use function Livewire\Volt\{state};

state(['chirps' => fn () => Chirp::with('user')->latest()->get()]); 

?>

<div class="mt-6 bg-white shadow-sm rounded-lg divide-y">

@foreach ($chirps as $chirp)

    <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
        ...
    </div>

@endforeach 

</div>

Reading the documentation it only include examples for the "class version" https://livewire.laravel/docs/pagination#basic-usage like:

use Livewire\WithPagination;
use Livewire\Volt\Component;
use App\Models\Post;
 
new class extends Component {
    use WithPagination;
 
    public function with(): array
    {
        return [
            'posts' => Post::paginate(10),
        ];
    }
}

So I already tried importing the trait in the view like:

use Livewire\WithPagination;

$getChirps = fn () => $this->chirps = Chirp::paginate(10);

or

$getChirps = function () { 
    return $this->chirps = Chirp::with('user')->paginate(15);
};

And I'm getting the next error:

Property type not supported in Livewire for property: [{"current_page":1,"data":[{"id":1,"user_id":1,"message":"This chirp is a test","created_at":"2025-02-14T03:24:24.000000Z","updated_at":"2025-02-14T03:24:24.000000Z","user":{"id":1,"name":"Roberto","email":"[email protected]","email_verified_at":null,"created_at":"2025-02-09T14:10:52.000000Z","updated_at":"2025-02-09T14:10:52.000000Z"}}],"first_page_url":"http://127.0.0.1:8000/chirps?page=1","from":1,"last_page":1,"last_page_url":"http://127.0.0.1:8000/chirps?page=1","links":[{"url":null,"label":"« Previous","active":false},{"url":"http://127.0.0.1:8000/chirps?page=1","label":"1","active":true},{"url":null,"label":"Next »","active":false}],"next_page_url":null,"path":"http://127.0.0.1:8000/chirps","per_page":15,"prev_page_url":null,"to":1,"total":1}]

So the query to the DB is working and is getting the pages, but the error is something else, I already tried to find any specific example for the pagination in the functional version but don't have any luck.

Could be great if somebody can help me to understand how to fix this Property type not supported message, or understand if is not possible to use the pagination with the Functional version.

• php
• laravel
• functional-programming
• laravel-livewire

Share Improve this question Follow edited Feb 24 at 0:56 Paul T. 4,9171212 gold badges4747 silver badges6363 bronze badges asked Feb 24 at 0:46 Roberto Hernández De La LuzRoberto Hernández De La Luz 1111 silver badge

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Use Chirp::with('user')->paginate(10) directly in the Blade template without storing it in the state.

Modify your Volt component to this:

<?php 
use App\Models\Chirp;
use Livewire\WithPagination;

$chirps = Chirp::with('user')->latest()->paginate(10); 
?>

Modify the Blade View:

<div>
    <div class="mt-6 bg-white shadow-sm rounded-lg divide-y">
        @foreach ($chirps as $chirp)
            <div class="p-6 flex space-x-2" wire:key="{{ $chirp->id }}">
                ...
            </div>
        @endforeach
    </div>

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

Try the below step, for your chirps problem, might this help you out.

Define the Functional Component with Pagination Modify routes/web.php to include pagination:

use App\Models\Chirp;
use Livewire\Livewire;
use Livewire\WithPagination;

Livewire::component('chirps', function () {
    return function () {
        return view('livewire.chirps', [
            'chirps' => Chirp::latest()->paginate(5), // Load 5 chirps per page
        ]);
    };
});

Create the View File resources/views/livewire/chirps.blade.php

<div>
    <h2>Chirps</h2>
    
    <ul>
        @foreach ($chirps as $chirp)
            <li>{{ $chirp->content }} - <small>{{ $chirp->created_at->diffForHumans() }}</small></li>
        @endforeach
    </ul>

    <!-- Pagination Links -->
    {{ $chirps->links() }}
</div>

Use the Livewire component inside any Blade file:

@livewire('chirps')

I am using the same way in my laravel project and it's working

本文标签： phpHow to use the pagination in Laravel Livewire with the Functional version not classStack Overflow