Infinite Scroll with Livewire
Playing
03. Seeding the database

Episodes

0%
Your progress
  • Total: 35m
  • Played: 0m
  • Remaining: 35m
Join or sign in to track your progress

Transcript

00:00
Okay so I can't stress enough how important it is when you're working with infinite scroll to have data in the correct order. By that I mean data that kind of looks like it's been created in a natural order one after another. The reason for this and the problem that we'll get is that when we're scrolling down and we see the next batch we want to make sure that we are
00:18
actually seeing these in a good order so we know that our infinite scroll is actually pulling in the next record. The amount of times I've gone ahead and implemented this and the IDs are all over the place and the orders all over the place it just gets really confusing. So it's worth spending a couple of minutes just going ahead and creating out this data in a really good order.
00:38
So we're going to jump straight into creating out the model that we want for this. So we're going to go ahead and make out a model that's going to be an article and we're going to generate a migration obviously because we need that for the database, a factory but also a seeder. So we've got MFS for all of them things. Okay so we'll jump straight over to the migration first
00:58
of all. So create articles table and let's go ahead and just fill this in with what we need. So we'll keep in the ID and the timestamps of course and for this we're just going to have a string with a title and let's have some text in here that's going to contain a teaser. So pretty basic data inside of here. So we can go ahead and just migrate this just so we can get this
01:20
into our database and sure enough there it is. Great! So let's go ahead and open up the article factory first of all and inside of the definition let's go ahead and fill in the title in here to generate out a fake title using this fake helper function and that's just going to be a sentence say of six words. We can duplicate this down swap out the teaser and then we can bump this up to
01:43
something like 20. So we now have for our article model which will already come with the has factory trait the ability to generate fake data out for this but if we just run this on its own normally we're just going to end up with a create that day exactly the same for every single article and that's a massive issue because then these aren't going to be in the right order we can't even
02:07
really order them we could order by the id but you know we want this to data to be as real world as possible just so it makes our lives easier so that is where our article cedar comes in and we're going to fill this in with what you would expect if you worked with factories before in laravel but so we're going to go ahead and say times 100 basically just creating 100 articles we'd normally
02:33
just go ahead and do this and write create we could even do that within laravel tinker but what we're going to do is in the in between here we're going to go ahead and set the state so let's pull both these down just they're a little bit neater and we'll go ahead and use this state method now in here what we can do is pass in a sequence so we're going to go ahead and new up a sequence
02:56
what this will do is allow us to basically access each of the iterations of this article cedar and we can use an index in here to increment the timestamp that's inserted so we have a new sequence in here we pass a closure into here into this we get the sequence object and then in here we can just return an array with what data we want to pull in and let's just pull in that sequence
03:22
at the top here so we're going to go ahead and say create it out now normally what we would do is say something like now which is just to help a function in laravel to give us back a carbon instance but with now what we can do is we can add a day onto this for every single index that we get when we're iterating through this data so we're going to go ahead and grab from the sequence that
03:44
gets passed into this closure the index so obviously this is going to start at zero it's going to go up to one two etc so this is just going to add one day for every single time this iterates through so let's just take a look at what this looks like without this and then we'll compare the results so we're going to go ahead and run php artisan db seed and we're going to go ahead
04:06
and obviously reference that article cedar let's hop over to the database give this a refresh and what we're interested in is the created at date so obviously all of these are pretty much the same there can be a little bit of variation if you're generating huge amounts of data out but they're all the same that's not what we want so we'll go ahead and just truncate this
04:26
table here and let's head over and go ahead and try this with this so let's rerun that article cedar db command come over and give that a refresh and here we go so what is now happening is all of these records are now incrementing in the day that they have been created that means that we can now naturally order them with the latest scope when we dump out our articles so again
04:54
you know not directly related to infinite scrolling but when you are setting these things up it's really important that you include stuff like state so you have a reliable data set to work with okay so we've spent a long time setting this stuff up let's go over the next episode and actually get these output on the page

Episode summary

In this episode, we focus on prepping our database with some nicely ordered test data—super important if you're working on features like infinite scroll! The big takeaway here is that your data needs to be created in a way that makes sense, meaning each item has a realistic creation date so things appear correctly in order when you're loading more items on scroll.

We start by generating an Article model, along with its migration, factory, and seeder. The migration gets us a simple table for articles with a title and a teaser. After running the migration, we use the factory to make fake articles with different titles and teasers.

But, if we just seed the database at this point, all our articles end up with the same or similar created_at timestamps. That messes up ordering, which isn't helpful for our use case. So, we use Laravel's state method and Sequence to increment the creation date of each article, so every new one gets a timestamp one day apart from the previous. This way, when we order by created_at, our data actually looks like a real timeline!

By the end, we have a reliable, realistic set of article records—perfect for developing and testing infinite scrolling. Next up, we'll get these onto the page and start building out the actual scroll feature.

Episode discussion

No comments, yet. Be the first!