Fast Infinite Scroll with Livewire
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
02. Setting up and seeding the database

Episodes

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

Transcript

00:00
Okay, before we get started, let's do a little bit of setup here. I've already got a fresh
00:03
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
00:24
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
00:44
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
01:09
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
01:32
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
01:54
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,
02:14
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
02:38
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
03:02
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
03:28
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
03:51
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.

Episode summary

In this episode, we're kicking things off with some database setup to get our Laravel project ready for future features. We start with a fresh Laravel app, using Laravel Breeze for authentication, and Livewire is already installed. But other than that, everything is at square one.

First, we generate an Article model along with its migration, factory, and seeder using artisan. Our focus is on getting a solid chunk of data to work with (about 100 articles), because this will come in handy later, especially for infinite scroll functionality. We set up the articles table with some basic fields (like title and body), and then use the factory to generate realistic data for these columns.

A key part here is making sure the created_at timestamps for our articles are incremented day by day using the factory's state and sequence features, instead of all being created at the exact same moment. This helps us easily verify the order of our data, which is crucial when implementing things like infinite scroll. We seed the database, fix a quick mismatch between the column and what we're generating (switching from body to teaser), and make sure everything lines up correctly.

By the end of this episode, we've got a database full of sample articles, properly ordered by their creation date. Everything is set up for smooth sailing in the next step: chunking our data!

Episode discussion

No comments, yet. Be the first!