Build a Livewire Comment System

Sign in Get started

This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Already a member? Sign in to continue

Playing

10. Eager loading on comments

Transcript

00:00

Let's take a minute to focus on eager loading. Now that we are outputting quite a bit of data here, before we do anything, I'm going to go ahead and create out a new user in the database and just switch some

00:10

of these comments over to that user. Okay. So I'm going to go ahead and create out a, another account here, just manually in the database.

00:16

Let's save that out. And then for some of the comments we've got, let's just go ahead and switch these over to the user ID of two, just so we have a little bit more variety. Okay.

00:25

So some of these now are from Mabel and we're going to go ahead and pull in Laravel debug bar so we can monitor our query count. So let's come down here and pull this in. Let's head over and install this, and this will be automatically

00:39

available to us in the browser. Now, when we give this a refresh. Okay. Let's open this up and have a look.

00:45

So you can see here that we've got 26 queries. That seems quite a lot for the amount of data that we're outputting here. So you can see that this is for every single comment plucking the user out individually.

00:57

Let's talk about how we're going to egoload this to make less queries. So if we come over to our LiveWire comments component, at the moment, we're just grabbing all comments, grabbing the latest comments at the top, and then just getting them.

01:10

We've got a little bit of work here to do to get these egoloaded. So let's pull these down here and let's start to load in some of this data. So we'll say latest and let's say with user. So that's going to pull in for each of the comments and egoload each user in.

01:27

You might've worked with egoloading before. So if we give that a refresh, you can see that now we are bumped down to 21 queries, but we're still getting these users pulled in that's just for the child comments that we have.

01:39

So we're going to egoload in for each of the children, the user inside of that child as well. Let's go back and give that a refresh. And now we have 13.

01:49

Now we've got another issue here where we've got this parent ID check. If we open this up, you can see that this is happening inside of our comment item. And what's actually happening here. If we look at this is when we access the children here, it's always checking the

02:05

parent ID for other nested items as well. So we only want two levels of nesting. We don't want any more. To get around this, we can go ahead and only iterate through the children.

02:17

If this is a parent comment. So let's add something else to this if statement. And we'll say, if the parent ID is null, so let's say is null comment, parent ID. Let's head over to the browser and you can see everything's still working, but

02:34

we are only now running nine queries. Great. So the reason that this works is because we only want one level deep. So only load children.

02:43

If we're dealing with the parent comment. Now, one more thing that we can do here, even though that naturally any of these replies that we add, if we just add a last reply in here, we'll always be at the bottom. If you wanted to change this up, you could order this via eager loading.

02:59

Let me show you what I mean here over in our comment section. So at the moment we are eager loading in the user, and then we're using this dot notation to load the user within the children. What we could do is we could switch this up, this entire thing for an array.

03:14

Then we could get rid of user and we can instead make child or children. A closure into here. We're going to get a query builder. So let's go ahead and pull in the query builder.

03:29

Then we could say query with user. Now that's exactly the same effect as what we just did with dot notation. We head over to the browser and check out our queries. You can see that we get exactly the same amount.

03:44

However, what we can now do is we can say oldest. Now that was specifically order the children in the oldest order. Let's go over and you can see that we get no different, but if you wanted the latest reply to be at the top, for example, now that you're within this closure, you

04:02

could say something like latest. And if we head over, you can see that the last comment is now at the top. So incredibly powerful eager loading in what we need via relationships, but also specifically ordering these at the same time.

Episode summary

In this episode, we turn our attention to eager loading with Laravel, specifically focusing on comments that have relationships with users. We start by setting up our data—adding a new user manually in the database and assigning some comments to this new account, just to get a bit more variety in our sample data.

From there, we install the Laravel Debugbar so we can keep an eye on how many database queries are being executed. Right away, we see that there are way more queries happening than necessary—clearly that N+1 problem when accessing users for every comment.

To fix this, we dive into our Livewire comments component and add eager loading for the user relationship. We see our query count drop, but we notice another layer for child comments is still causing extra queries. By eager loading the user relation for the child comments as well, we're able to bring the query count down even further.

We also tackle the nesting issue, making sure we only pull two levels of comments to keep things efficient and readable. After adjusting our loop and checks, the query count drops even more.

Lastly, we explore how to not only eager load relationships but also order them as needed. Using a closure in our eager loading, we show how you can customize the ordering of child comments—making them appear oldest or newest at the top, depending on your preference. The episode shows the practical value and flexibility of eager loading relationships in Laravel, keeping your app fast while giving you full control over how related data is loaded and displayed.

Episode discussion

No comments, yet. Be the first!