If you use any form of social media, you'll note that on your feed, as you scroll down, rather than having to press a button to move to the next page of content, it automatically loads that page in for you. Well, that technique is known as infinite scrolling, and I want to show you in this series how you can implement that in InertiaJS. I think it's actually a really cool technique, and we're going to cover a few different paradigms, from tracking state in Vue to wrapping up our implementation in a beautiful composable that you can use across multiple projects. Let's dive in. So I've already put together this UI for us to work with. I have this comments index, and you'll note that we basically have comments that people have made. You can imagine that whilst there's only four here at the moment, this is not wired up to anything as of yet, there could be hundreds of comments. And at the bottom here, I have a basic paginator where I can click Next to see the next page of comments. So in this episode, we're going to work to wire this up to a backend using Inertia, and then we'll take a look at how we might be able to get rid of this paginator and instead implement that infinite scrolling we were talking about. If I jump into another tab, I've created this little /comments/index, which just spits out the JSON output of comments from our database.

So in this episode, we're going to work to wire this up to a backend using Inertia, and then we'll take a look at how we might be able to get rid of this paginator and instead implement that infinite scrolling we were talking about. If I jump into another tab, I've created this little /comments/index, which just spits out the JSON output of comments from our database. So first things first, we want to wire up the information we see here to our UI. Let's go ahead and do that. So here's our CommentsController, and this invocable method is basically in charge of rendering this page. You can tell it's hard-coded at the moment because we're not passing any data down to Inertia, we're just outputting the correct view. So we're going to start really naive, and then we'll slowly make this solution more robust. Let's create a variable called comments, and we'll make that equal to all the comments in the database. And then we can pass those comments down like so. That's basically all we need to do in regard to the backend at the moment.

And then we can pass those comments down like so. That's basically all we need to do in regard to the backend at the moment. Let's go ahead and jump into the frontend by heading to this file here. So here's the frontend. You'll see I've created a little application shell along with a header and then a list with all the comments. You can see they're hard-coded, and now you can see how all of this is put together. So the first thing we want to do is update our setup script to take the comments prop. Let's say const props = defineProps(), and then we'll pass in our comments. It's going to have a type of object, and I like to make clear that it is a required property. If we head down to our list, we should now be able to loop over comments rather than outputting them one by one as we are doing currently.

It's going to have a type of object, and I like to make clear that it is a required property. If we head down to our list, we should now be able to loop over comments rather than outputting them one by one as we are doing currently. So let's say v for comment in props.comments, and as I pass the user in, I can instead say comment.user.name. Posted at will be comment.createdAt, and I'll need to prefix this with a colon like so. And then the content will be comment.body. Now, I imagine that this is going to fail on me. So let's see what happens. If I come back into my view, yeah, we don't have any output. There's obviously a console error. Looking at the console, it's going to say undefined reading name.

There's obviously a console error. Looking at the console, it's going to say undefined reading name. So what's taking place is we haven't actually loaded the User model in when we loaded all of our comments. So let's head back to our controller, and here we'll say with User, and then we'll get all of the results. Let's see if that fixes our problem. Sure enough, it does. And you can see here Jeffrey Way says welcome to Laracasts. I say hello, and it goes on and on. Now, currently we only have five items or five comments, so this doesn't really cause a problem. But as you can imagine, our current logic as we create hundreds of comments will cause this page to become very, very slow and sluggish.

Now, currently we only have five items or five comments, so this doesn't really cause a problem. But as you can imagine, our current logic as we create hundreds of comments will cause this page to become very, very slow and sluggish. Let's go ahead and add more comments now. So in my database seeder, you'll see that I'm basically creating our four users. I create my hard-coded comments here. Underneath, I want to create a bunch more comments, so I'll do this by filling up a collection. And you can use collection::times to do this. Let's grab 250 comments, and each comment should be created by returning an array which contains the user_id, and the user it should use is a random user from our list. I'll have to spread this out.

and the User it should use is a random User from our list. I'll have to spread this out. And once I've done that, I should be able to run php artisan migrate:fresh --seed. If I do so, I'm told that the database has been seeded. You can see we now have many more comments in our JSON endpoint. And if I reload this page, yeah, all of a sudden we have hundreds of comments in here. And you can imagine that this is going to put a large load on our application and database. So the tool we usually reach for in these cases is pagination. Let's add pagination to our controller now. In order to add pagination, I can just switch this get call out with a call to paginate instead.

Let's add pagination to our controller now. In order to add pagination, I can just switch this get call out with a call to paginate instead. And when I do so, it's going to auto-assign the number of items per page, but let me hard-code that by passing 50. In order to see what's actually changed here, let's return comments instead of returning an Inertia component and reload the page. You'll see that we now wrap data inside an object that contains all of our pagination information. And there are a few items that we're interested in here. We're obviously interested in data. We're also interested in the nextPageUrl, the previousPageUrl, to, total, and from.

We're obviously interested in data. We're also interested in the next page URL, the previous page URL, to, total, and from. So let's keep those keys in mind as we update our Inertia component. All right, the first thing we'll want to do is update our loop here to use the data prop on the comments. Let's split this down into separate lines, and then let's fill out our pagination prop with the correct details. So previous is the URL of the previous page. In this case, it's going to be props.comments.prevPageURL. Then we can update next, props.comments.nextPageURL. We can update from to be props.comments.from,

Then we can update props.comments.nextPageURL. We can update from to be props.comments.from, to to props.comments.to, and the total to props.comments.total. Oh, just for full clarity on this pagination component, by the way, we're not going to be keeping it around, obviously, once we move to infinite scrolling, but it's basically just two inertia links which obviously stop a full page reload taking place wrapped up inside a reusable component that I can stick anywhere in the project. With that done, we should be able to head back into our controller, return the inertia component again, and sure enough, we now have a paginated list of components. Just to showcase this a little bit easier, let's alter our pagination to do 10 per page,

return the Inertia component again, and sure enough, we now have a paginated list of components. Just to showcase this a little bit easier, let's alter our pagination to do 10 per page, head back in and refresh, and yeah, now we just have 10 items per page, and we can click Next to load the next page of items. So it's incredibly simple to do standard pagination in InertiaJS, but as we said, it's annoying to have to click Next and Previous every single time we want to change the page, every single time we want to see new content. It would be much nicer if this just automatically loaded in the next page as we hit the bottom. So in the next episode, we'll take a look at how we can alter our pagination in Vue.js in order to be able to implement this idea of infinitely loading content.

So in the next episode, we'll take a look at how we can alter our pagination in Vue.js in order to be able to implement this idea of infinitely loading content.