Using Eager and Lazy Loading to Load A Movie's Writer and Director

In This Lesson

We'll learn how we can use eager loading to preload our writer and director onto our movie's details. We'll then, learn how we can load our writer and director onto our movie's details using lazy loading.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

So moving forward, it's gonna be a little bit more convenient for us to actually list out the movie's writer and director here instead of the summary.
And first and foremost, for our movies controller here on our index method, which shows our homepage, for each of the movies that we're querying,
we're going to want to include both the writer and director. Now we can use eager loading or preload to make that happen relatively easily. So we can preload our director
and preload our writer. We can give that a copy. And we want to do the exact same thing on our recently released movies there as well. Now, if we dive into our movie card,
we can jump down. Here's where we have that summary. Let's just switch this out with a simple definition list. We'll wrap this in a div class flex
and our definition title will be writer and our data definition will be this movies writer.fullname because we've preloaded our writer
and our director directly on the recently released movies and the coming soon movies that we get back. So we can reference them directly via that relation name.
Now, before we add in our director, let's add a width to the writer with maybe 24 so that our writer and director there are the same width and everything lines up nicely.
Give that a copy and a paste, switch this one to director and switch this from referencing our writer to our director there as well. So if we give that a save, jump back into our browser,
we are on our homepage and 24 seems a little big and we'll also make that text small so that it fits a little bit better in there. So let's hide our browser away real quick.
And let's see, let's first make this whole thing, class text extra small. Really in the future, we're just going to be using this information for verification sake with some future queries
that we'll be writing. So it being small is a okay here and let's switch this to maybe a width of 16. All right, now that should fit a little bit better. Let's give that a save, jump back into our browser.
Yep, there we go. Let's fix up the padding real quick as well. So P7 as a whole is a little bit big. Let's switch that to four. This font size here can be base. So we'll just get rid of that altogether
and we'll add a PY of four on our definition list here as well so that we have some space between our title and our button. Okay, see how that looks.
Oh, actually our H2 title is taking over on that. Let's switch those to H3. So H3 there and H3 there. And we can get rid of the margin bottom two there as well. Okay, let's see how that looks.
There we go, that's a little bit better. Okay, cool. So now we have our writer and our director. We can go ahead and link to their show page there as well. So within our data definition, we'll break that down,
add an ahref route. This is our writer. So this will be our writer's show page.
The ID for them will be movie.writer.id. And we can paste back in their full name. Do the exact same thing down here as well.
So ahref route, directors, show, ID, movie, director, ID, and the anchor. And in between paste our director full name back in.
So now we should be able to jump back into our browser and click on Skyler Flatly here. And okay, it does seem like everything worked. We're just getting an error within our movie card
because we haven't preloaded the writer onto this movie's details. So we will want to make that conditional because we don't want to relist the writer on the writer's show page. So within our text editor,
we can wrap this definition list in an if check. And we can have it specify whether or not we want to show the summary or the writer and director details.
And we'll have our props, plop that into a variable called show writer director. Otherwise we'll end our if and show the summary instead.
So we'll go ahead and paste our definition list and in our else, we can do a paragraph class, text slate 400, text extra small, movie summary.
So if we give that a save, on our homepage we should now be back to the summary. We also want to give that a margin or a padding, PY4 there, okay.
And let's jump back into our homepage now. So back to home. And on the movie cards, show writer director and set that the true.
Okay, so now in our coming soon section, we should see the writer and director and within our recently released, we should see our abstract or our summary, I mean. So there's our writer directory
and then in our recently released, there is our summary. So, okay, cool. Down here in our recently released, let's go ahead and add in that show writer director,
set that the true, just like so, awesome. So now everything should be a-okay. On our homepage, we now have our writer and director showing. If we click into a writer,
it will now show their abstract because we already know that we're looking at Skyler Flatley here, so we don't need to list that out again. I guess we could show the director, but that's okay. Let's also include that information
on our movies detail as well. So just underneath the title. So let's hide that back away in our movies controller, scroll down to our show method and here we'll need to do lazy loading
because we are using find by or fail. We could switch this to using the query builder, but lazy loading is a-okay. We'll await movie load director
and await movie load our writer. And so now we can jump into our movie show page and add that somewhere underneath our title.
I think let's just go into our card, copy that definition list, like so, jump back into our show page and paste that in there. Instead of text extra small, let's just switch that to text small
and these have a little bit more room so we can switch them to a width of 24. Cool, so we can give that a save there, jump back into our browser and look at that, there's our writer and director.
And once more, we can click into that writer from here as well.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.