Alright, let's think again about this comments prop. In standard pagination this works well because as you click next, the entire content of our comments property will change, we'll see the next page of comments. But in infinite scrolling we don't want to remove the previous page of comments, we simply want to append to the existing comments array. Well you can't do that with a prop. A prop is not defined and controlled by the component. Instead we're going to need to copy the data from this prop into a ref. We can do that by calling the ref helper. Let's create a constant called items and we can import the ref helper and initially we'll set the ref's value to props.comments and we just want the data from those comments, in other words the comments themselves. If we update our html to instead loop over those items and we go back to our browser and refresh, let's make sure we're on the right page, yeah

in other words the comments themselves. If we update our html to instead loop over those items and we go back to our browser and refresh, let's make sure we're on the right page, yeah here are our comments. However when we click next you'll note that we're still loading in the next page of comments. We wouldn't really expect that right? We'd expect to see the initial page of comments because we're using a ref instead of a prop. Well in Inertia when you use a link, by default it's going to reset the state of your component. Now that's not what we want in this case, so let's jump into our pagination component and I'm going to add preserveState as a tag on these two links. Now when we do this and we reload, here's our first page of content and when I click next you'll note we are still on our first page of content. The page number has changed but no matter how many times I click

here's our first page of content and when I click next you'll note we are still on our first page of content. The page number has changed but no matter how many times I click next we only show our first page of content. So our next step is going to be to append new comments to our ref of items that we have here. In order to do this we can introduce a watcher. So we're going to watch for changes to our comments and we'll do that using a closure. As the second parameter to watch we'll receive any new comments that come in and then I want to alter the value of items. I'll set it to the initial items, so that's going to be items.value, but then I'll push in any new comments that have come through our prop. Once we've done this if we go back to our browser and refresh, let's make sure we're on the right page. If I click next, although we jump back to the top you'll notice

our prop. Once we've done this if we go back to our browser and refresh, let's make sure we're on the right page. If I click next, although we jump back to the top you'll notice that we actually have 20 comments in place now. At this point we no longer really need this paginator instance so let's replace it with a custom button at the bottom of the page. Let's comment out pagination because it's useful for reference and let's import our InertiaLink. We'll call this loadMore and then let's set the href to props.comments and then we want the nextPageUrl. In other words, always load the next page of data. We can add that preserveState flag that we added earlier and we can also add another flag called preserveScroll which will stop Inertia jumping back up to the top of the page. Let's see what this does. In our browser we'll make sure we're on the first page of

flag called preserveScroll which will stop Inertia jumping back up to the top of the page. Let's see what this does. In our browser we'll make sure we're on the first page of content. We have an error. Undefined reading comments. Let's take a look at the problem. It looks like it's on line 38. props.comments.nextPageUrl. That should fix that. It certainly does. So now we have our first page of data and as we click load more here you'll note that we load in the next page of data. We don't lose the initial page of data. You can see that's still up here but we're simply loading in more content. And this is the basics of infinite scrolling right? This really is all there is to it. We're simply taking over the paginator and ensuring that we can load our own data. We can append to that data and output a ref on the screen instead of relying on the original prop which is destined to change. Now there

and ensuring that we can load our own data. We can append to that data and output a ref on the screen instead of relying on the original prop which is destined to change. Now there is an issue with our current approach. Note that we're on page 7 of content. This works fine here but if I go back up to the top and do a hard page reload you'll note that we no longer load our very first comment. Instead we load the first comment on page 7. Now we can load more and load in page 8 but we'll never see the first page of content again. We need a way to fix this so let's jump back into our code and add a solution. In order to fix this we're going to have to move away from allowing an Inertia link to do the heavy lifting for us and instead introduce a closure that will make a manual visit. Let's create that closure at the top. I'll say const loadMoreItems and this is obviously a closure that is going

lifting for us and instead introduce a closure that will make a manual visit. Let's create that closure at the top. I'll say const loadMoreItems and this is obviously a closure that is going to use Inertia's router. So we can import that and we want to call the get method on that router object. Now the URL we want to reach for is obviously the next page of content and GitHub copy that has everything right here so I'll simply expand that. Load in the next page of content and as data which is actually the third item that we pass we want to preserve state and we want to preserve scroll. We'll also want to add an onSuccess handler and the onSuccess handler is going to be charged with managing our history, our page history because basically what we want to do is avoid this parameter ever changing. That will allow us to reload the page and still be on page 1, our initial page of content.

page history because basically what we want to do is avoid this parameter ever changing. That will allow us to reload the page and still be on page 1, our initial page of content. In order to do this we need to track the very first URL when the page is loaded so up here let's say const initialURL equals usePage.URL. usePage is an Inertia helper that will provide all of this sort of information for you. Now in our handler down here we can say window.history.replaceState we want to pass an empty object for the state change, an empty string as our second parameter and then that initialURL as our third parameter. Ok so all that's left to do here is make use of this new function that we've created. Let's update our link to remove the href. We can also remove preserveState and preserveScroll and we can replace this with an @click which is going to load more items. Let's see if that works in our browser. We'll reload, here's

also remove preserveState and preserveScroll and we can replace this with an @click which is going to load more items. Let's see if that works in our browser. We'll reload, here's our first page of data and as we click load more you'll see that the page changes but note that our URL is the same. No matter how many times we click load more we are always on page 1 which means when we hard refresh the page we always get that initial page of content. So this is a nice little work around that you can use to ensure that even though you're switching pages when you hard reload it will always load the first page of information. If you think about it we no longer need this watch call here because we could simply place this functionality directly into our onSuccess handler. Let's drop this in here and remove watch entirely and obviously we have no concept of comments anymore so we'll need to grab

this functionality directly into our onSuccess handler. Let's drop this in here and remove watch entirely and obviously we have no concept of comments anymore so we'll need to grab those comments from our props. If we do that, reload the page, everything should work exactly as it did before but we've now simplified our code. There is one other check I want to add here and that's ensuring that there is actually another page of comments to grab. So we can add a simple if call at the top that checks that the nextPageUrl actually has something in it. If it doesn't we'll simply return early and this get method will never be called. Well that wasn't so hard was it? We have a simple way of infinite loading in InertiaJS but we have to keep clicking this load more button and in my opinion it ain't slick to have to click. It would be much nicer if as we reached the bottom of the page

InertiaJS but we have to keep clicking this load more button and in my opinion it ain't slick to have to click. It would be much nicer if as we reached the bottom of the page here it automatically called our loadMoreItems function in order to grab the next page of data for us. Let's take a look at how we can implement that in the next episode.