Sign up to access "Fast Infinite Scroll with Livewire" right now.

Laravel app set up with Laravel Breeze. I've migrated everything and obviously Livewire is installed. But apart from that, I have not done anything. So the first thing that we're going to need is some kind of model. So let's go ahead and make out an article model here. And we're going to go ahead and use the MFS flag. So we're going to create a migration. Obviously, we're going to

create a factory and we're going to create a seeder. We need a huge amount of data here. And really importantly, we want this in the right order, because the way that we're going to be chunking things by IDs, we'll get to that, you'll see that we need to really visually verify that everything is in the correct order. Or we're going to build this without any knowledge that

we're not doing that properly. So let's go ahead and really quickly create out the articles table just here. And we'll go ahead and add in just some really basic data. So let's go ahead and add in a title. And we'll go ahead and just have a body. So some text here with a body. I think that's pretty much it. Okay, great. So next thing is, we'll just go over to the article factory and

just fill out some of the data that we want to seed here. So obviously, we've got a title here, which would be good as a sentence, maybe six. And then we'll go ahead and add in the teaser as well, which will bump up to 20. So now is the really important part, that is the seeder. So let's go over to our article seeder. And usually, when we go ahead and see the database, we'd just do

something like this. So we'd choose the model, we'd go ahead and pull out the factory instance, we choose how many times we want this. For now, we're just going to set this to 100. Because we need to verify when we get to the bottom, and I don't want to scroll through 1000 articles. And then we would just go ahead and create this out. So that would be an article or 100 articles. But

the problem here is that all of the created out dates are going to be exactly the same. And therefore, we don't really have a good way to order this except by ID. And I don't really want to do this when I'm building something like this, I want to make sure that the data looks as real as possible in terms of when it was created. So what we're going to do is use the state method here,

and we're going to pass in a new sequence, which will allow us to within this closure, choose what we want to add in a particular column. So in our case, that's going to be created out. So I'm going to go ahead and set this to now which is just returned to carbon instance, and populates the database with a timestamp. But what we can do with this, we actually get the

sequence passed into the closure just in here, we can go ahead and add on some days to this using the sequence index. So for every single iteration of an article being created, obviously, there's going to be 100 iterations, we can access this sequence, and then we can modify any of the data inside of it based on the sequence index or any of the other data that's inside of that. So in our

case, we just increment in the day, that's pretty much all this is doing. So we can go ahead and run this now, let's say php artisan db seed and choose that article cedar. And yeah, sure enough, let's have a look teaser is not in there. What do we call this? Let's have a look at our migration body. So let's switch this to teaser. And we'll just go ahead and roll that migration back and

re migrate. Great. Okay, so we can run our CD now. And there we go. Great. So we should have in our articles table 100 records, but the creator that date increments, as we can see here, for each of the days, which is great. So we've got a nice order to what we're working with. So that's pretty much it. I always cover this stuff when we're talking about infinite scroll, because

it's so important that you have the data in the right order. The amount of times I've implemented infinite scroll, thinking everything is working with a really complex solution to make things fast, I've seen that the data is just in the wrong order. And that is an absolute nightmare. So now we've done this, let's head over and talk about chunking.