Laravel Cursor Pagination
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 25m
  • Played: 0m
  • Remaining: 25m
Join or sign in to track your progress

Transcript

00:00
In this course, we're going to talk about cursor pagination in Laravel.
00:03
This was added quite a while back, but it's useful to bring up if you were doing things like loading more items. And what we have here is a view application,
00:12
which is consuming a Laravel API. And we're paginating the results in order to get the next page, which we're then going to push onto the stack of items we have here.
00:21
Now, this could be absolutely anything. Doesn't matter what you're paginating. In our case, it's just some fakely generated data. And you can see, really importantly,
00:29
write something at the top. So let's just take a look at how this works normally. We've got about 15 items in our database, and we're showing 10 per page.
00:37
And when I hit Load More, as you can expect, you see 5, 4, 3, 2, 1. And I've included the IDs here. That's really, really important so we
00:45
can keep a track on where we are in terms of the matching up of the correct loaded next page. OK, so that's all good. But if you were to implement this with normal pagination
00:58
and you were to write something and add something, e.g., within view, append something to this list of items, so I'm just going to put new post, that goes ahead and pushes that to the stack really nicely.
01:10
The only issue is, when we go ahead and hit Load More, you can see that we get a duplicate here. Now, the reason for that is, obviously, when we push a new item to the database,
01:19
Laravel's pagination doesn't know that a new item has been pushed. It's just going to go ahead and load in from the point that it thinks it needs to, which is exactly what you're
01:28
telling it, whereas we want to kind of offset this. Now, there are ways around this with normal pagination, but it involves manually building up a paginator. And it can actually be very slow as well.
01:41
So with cursor pagination, this solves the problem of this, particularly if you're using something like Load More. So I'm going to go ahead and behind the scenes just switch this over to cursor pagination,
01:52
and we'll see that this should be fixed. OK, so I've gone ahead and switched that over. We have exactly the same thing here where we can write something.
01:59
So I'm going to say another new post. I'm going to hit Post. And now, when we go down, let's hit Load More, you can see that, sure enough, we get 6, 5, 4, 3, 2, and 1.
02:10
So cursor pagination can be useful in other instances, but I've found I've always used cursor pagination, either manually or the new cursor pagination within Laravel that we fairly recently added
02:21
when I'm doing a Load More. And that's going to save you a huge headache of manually doing everything yourself to try and match this data up, both on the API and on the client.
02:33
So let's go ahead and get things set up. We'll pretty much build this all out from scratch, and we'll go ahead and make this work, as we can see right here.

Episode summary

Welcome to the course! In this episode, we’re diving right into what cursor pagination is all about in Laravel and why it’s super handy, especially when building UIs with a “Load More” button.

We’ll start by looking at a Vue app that’s currently pulling paginated data from a Laravel API—a really common setup. You’ll see some sample (fake) data loaded in, and we’re showing 10 items per page. When we click “Load More”, the next batch of items appears as expected. But, if you add a new item (like posting something new in the UI) and then click “Load More”, you’ll notice a duplicate item shows up. That’s because classic pagination doesn’t handle new items well: it keeps its place by offset, not by the actual data.

The rest of the episode shows how simply switching to cursor pagination in Laravel completely fixes this issue. Now, when you add something new and load more items, you don’t get duplicates—just smooth, fast loading (no matter how big your dataset grows!).

Throughout the video, you’ll get a proper demo, see the issue with regular pagination, and then see how cursor pagination makes it all a breeze. Next up, we’ll set up everything from scratch and build it, so you can see exactly how it works in your own project.

Episode discussion

No comments, yet. Be the first!