Learn how to build Laravel Livewire infinite pagination to dynamically fetch data from the back-end with the help of cursor pagination for faster and efficient querying
Please support us by disabling your ad-block. The revenue help us create more content for the community.
In this post, you'll learn how to implement an "infinite pagination" component in Laravel with the help of Livewire. The cursor pagination will be used to paginate the data for faster and efficient querying over your model. The steps are very simple so let's get started. Laravel Livewire Infinite Pagination Example
The full layout should be as follows. If you have an existing layout, do put the "@livewireStyles", "@livewireScripts" and "{{ $slot }}" on the necessary location.
Now that you have the layout code ready in place, it's time to create a new "InfinitePostListing" Livewire component and you can use the command line to generate it.
php artisan livewire:make InfinitePostListing
Upon successfully creating the component you should see the command line output like below.
COMPONENT CREATED 🤙
CLASS: app/Http/Livewire/InfinitePostListing.php
VIEW: resources/views/livewire/infinite-post-listing.blade.php
Step 3: Define the Route Endpoints
Before we start with the component logic, define the route in "routes/web.php" to provide the access endpoint.
Inside the Livewire component, you'll need to define 3 methods:
mount() - The lifecycle method to initialize the data
loadPosts() - The method to load more posts
render() - The method to render the "views"
public function mount() {}
public function loadPosts() {}
public function render() {}
Other than that you will need to have 3 properties and they are the:
$posts - To hold the posts data
$nextCursor - to hold the next pagination cursor
$hasMorePages - to determine whether there are more records
public $posts;
public $nextCursor;
public $hasMorePages;
The full code example will be as follows. Do note that Laravel Livewire component only accepts PHP "scalar types", "Models" and "Collection" so other than those types, the component will throw out an error.
<?php
namespace App\Http\Livewire;
use App\Models\Post;
use Illuminate\Pagination\Cursor;
use Illuminate\Support\Collection;
use Livewire\Component;
class InfinitePostListing extends Component
{
public $posts;
public $nextCursor;
public $hasMorePages;
public function mount()
{
$this->posts = new Collection();
$this->loadPosts();
}
public function loadPosts()
{
if ($this->hasMorePages !== null && ! $this->hasMorePages) {
return;
}
$posts = Post::cursorPaginate(12, ['*'], 'cursor', Cursor::fromEncoded($this->nextCursor));
$this->posts->push(...$posts->items());
if ($this->hasMorePages = $posts->hasMorePages()) {
$this->nextCursor = $posts->nextCursor()->encode();
}
}
public function render()
{
return view('livewire.infinite-post-listing')->layout('layouts.base');
}
}
So a little bit explanation of the code above, there's 5 important flow that you have to know.
When the component is loaded, the "mount()" method will be triggered and the "posts" property is initialized with an empty Laravel Collection.
Then the "loadPosts()" method is triggered to load the "posts" that are retrieved by the "cursorPaginate" method.
The pagination will be determined by the "nextCursor" property which is encoded and decoded every time the "loadPosts" method is called.
The retrieved data is "pushed" to the "posts" collection.
Finally, the "render()" method renders the view for the user to see.
Step 5: InfinitePostListing Views
The views will loop through the "posts" properties and for this example, simple styling is applied with "TailwindCSS" classes. Assuming the "Post" model has a "title" and "body" column, you can access it as you normally would in Laravel Blade file. Infinite Load Posts The code for the views will be as follows. Do note that we are including the "skeleton" loading component to show that the post is being loaded when scrolling to the bottom of the page.
By now you should be able to implement Laravel Livewire Infinite pagination and If you found this tutorial to be helpful, do share it with your friends, cheers and happy coding 🍻.
