Playing
01. Introduction and demo
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.
6 episodes• 25 mins•3 years ago
Overview
Let's learn about cursor pagination in Laravel. With a simple method change, you'll end up with better performance with larger data-sets and much easier implementation of infinite scrolling.
We'll build up a simple Vue app where we can post to a timeline, check out why standard pagination doesn't work and then switch to cursor pagination to fix it up!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!