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.
- Author
- Tom Gobich
- Published
- Mar 26
- Duration
- 5m 18s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Using Eager and Lazy Loading to Load A Movie's Writer and Director
-
(upbeat music)
-
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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
The Flow of Middleware7m 49s
-
Authenticating A Newly Registered User4m 14s
-
Checking For and Populating an Authenticated User2m 10s
-
Logging Out An Authenticated User2m 24s
-
Logging In An Existing User6m 54s
-
Remembering A User's Authenticated Session6m 55s
-
Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!