This episode is for members only
Sign up to access "Laravel Cursor Pagination" right now.
Get started
Already a member? Sign in to continue
Playing
05. Storing a post and breaking pagination
Transcript
00:00
Let's get this form working so we can finally get around to breaking pagination. So to do this, we're going to need some sort of form that we can post through to our backend.
00:09
So I'm just going to come down here and create a form variable. And this is going to be a reactive object because we may have other data in here. So we're going to go ahead and pass through an object to this. And at the moment, all we have is a body.
00:25
So we can hook this up with a V model. So let's go up to the text area that we have here. And just say V model form.body. Now, if you're new to Vue, we can actually go ahead and just dump the form out here.
00:37
And you can see that whatever we write in here goes ahead and gets put into that object with whichever property we chose. So now when this form is submitted, so we can say V on submit, not forgetting to prevent the default behavior,
00:51
which is actually going through and posting this through, we can go ahead and just call something like store post. We can go down and create a method out to handle that. So let's create a store post method.
01:04
Again, make this async because we're going to be making a synchronous request here. And that's pretty much it. We just need to go ahead and store that data. So let's pull our form just up here,
01:16
because it makes a little bit more sense to have that at the top here. And let's go ahead and make a request through to an endpoint to store this data. Now, we don't have one of those at the moment. So the first thing that we're going to do is go ahead and create out a post store controller.
01:32
This is going to be very simple. We're not going to implement any kind of validation or anything like that. So we'll just keep it super simple. And again, this is just going to have an invoke magic method.
01:41
Make sure we get the request data through because, of course, we're going to need that. And let's go ahead and very quickly fill this in. Now, the key thing here is we need to return the post because when we make a request to this in our client,
01:52
we need to get this back and prepend it to the top. That's where the pagination issue lies. So let's go ahead and create our post variable. And we'll say post create.
02:03
And from the request, let's just grab the post body. And let's just make sure we import the post model here. And then we just want to return a really simple response here. And Jason, I'm actually going to wrap this in data just to make
02:17
it a little bit more consistent with what we already have. But it doesn't really matter. And that's pretty much it. The last thing I want to do is just make sure we come over to our model here
02:26
and just make sure body is fillable or that's not going to allow us to insert that. Great. That should be it. So if we head over to routes and API, let's just copy this one down,
02:38
switch this over to a post request, and, of course, change the controller over to a post store controller. Great. So we can now send a request through to here and hopefully get that data back.
02:49
And we'll do that within store post. So let's go ahead and assign a response to this. And we'll go ahead and use Axios to post through to API slash post with the form data. So we'll pass our form into there.
03:03
And let's just leave it at that for now. So if we just come over to here and say new, hit post, we should have seen a request go through in our network tab. But we should also see a new post just down here.
03:17
I'm going to go ahead and delete that for now. And now let's push this to the top of the form. So we're going to go ahead and say post stop value. So that's the stack of posts that we have.
03:25
Again, we're going to build up a new array here. And the new array is going to contain the new post at the very top. So that's the first thing. And then it's going to contain the destructured post that we already have.
03:37
So again, building up a new array, kind of like we did here. And then we're just going to go ahead and reset the form body back to an empty string. So let's test this out. So I'm going to say new, hit post.
03:48
There we go. There is our new post. Now, this is where we've broken pagination. Because technically, the next one should be 11.
03:56
But because this has been posted in the back end, and we've not sort of refreshed the pagination, when we click load more, page 2 is still technically going to contain an offset of 1,
04:08
because we've posted a new post. And that will be the same if we post 3 new posts, then we'll have an offset of 3 as we load more. So you can see here that we end up with an extra item at the end here.
04:21
So this really isn't working how we expect. Let's just go ahead and do 2 more. So I'm just going to say 1 and 2. And let's go down and hit load more.
04:30
And you can see, yeah, it's just not matching up properly. So we're going to head over to the next episode, have a look at what cursor pagination looks like in our API response, and then see how this fixes it.
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!