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.

18 episodes•1 hr 40 mins•1 year ago

Overview

Build a drop-in comment system with Livewire that instantly works for any model.

We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually.

Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!

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

Episodes

Transcript

Overview

Episode discussion