🕰️ Chapters
- Querying the Movies Cast Members
- Defining Our Cast Member Form Fields
- Defining Our Cast Member Validations
- Syncing Our Movie Cast Members
- Extracting Our Cast and Crew Member Sync into a Service
- Introducing Managed Database Transactions
- Fixing Our AlpineJS Loop Keys
- Testing Our Sync Behavior
Managed Transactions and Syncing Movie Cast Members
In this lesson, we'll learn how we can use what we learned in the last lesson to also sync our cast members. We'll then extract this functionality into a service and wrap it within a managed database transactions.
- Author
- Tom Gobich
- Published
- Jun 26
- Duration
- 15m 55s
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
Managed Transactions and Syncing Movie Cast Members
-
So now we have the ability to add and remove crew members as well as designate
-
what their title is for this individual movie.
-
Let's go ahead and do the exact same thing for our cast members as well.
-
It's gonna be relatively similar.
-
So within our movies controller here, inside of our edit method,
-
this is where we're querying the array of crew members applied to the individual
-
movie that we're editing.
-
Whenever it comes to create, remember if we scroll on up to our create page,
-
we don't need to worry about this, the movie's data, or anything in general
-
because nothing has been applied to the individual movie as we're just
-
creating it there.
-
But for our edit, we do need to worry about that.
-
So we can give our crew members here a copy, give ourselves a couple of new lines
-
and paste it in, change it from crew to now cast, and
-
we also need to change the relationship to the exact same.
-
So switch it from crew to cast.
-
The rest of the query there can remain the same as it's just filtering it down to
-
the individual movie that we're editing and then ordering it by its sort order.
-
So that applies for our cast as well.
-
Then all we have to do is add our cast members into our page state.
-
So let's go do that.
-
So cast members right there.
-
And now we have access to both our crew as well as our cast members inside of our
-
create or edit page, specifically whenever we're editing a movie.
-
So let's go ahead and jump into our create or edit page now and
-
come down to our H4 and the div where we have our x-data members applied that
-
we're passing in our crew members.
-
Essentially, we're going to want to replicate this whole section.
-
So I'm going to hit the caret to collapse that down and
-
make copying this just a little bit easier.
-
Give that a copy, give ourselves a couple new lines underneath it, and
-
then paste it on it.
-
For the most part, things can remain the same here.
-
If we scroll on up to the top where we have this section,
-
we're going to want to change instances where we have specifically crew to cast.
-
So for example, our heading here will change to cast members from crew members.
-
Where we're passing in our crew members,
-
we're going to want to instead pass in our cast members.
-
The x-data that we have here from Alpine JS is going to be scoped to this
-
particular div, so we don't need to worry about collision between this div and
-
our crew members div up above it.
-
And since they're going to be scoped to the divs,
-
that means this members is going to be used for this member array.
-
And up above, this members would be used for the crew members array.
-
Okay, so let's scroll back down and continue going through and
-
replacing instances where we have crew with cast.
-
We also want to do that with our name.
-
So rather than crew, we'll have cast as the name prefix for our fields.
-
And then down here, cast there as well.
-
And in addition, this field itself is not going to be a title, but
-
rather a character name.
-
So within the name field of our cast array,
-
remember this index here is what's making this an array.
-
And then the second square brackets is the individual property name inside
-
of this index of the array.
-
We want to change that property name from title to character name.
-
We also want to change the reference of the X model from members index title
-
to character name there.
-
And then from title up here on the label to character name there too.
-
And I believe everything else should be able to remain the same because we're
-
still working with our synists, so the options there remain the same.
-
We're still working with our synists there, so
-
the X model there remains the same.
-
And we're still working with a variable called members,
-
scoped to this individual div, working with our cast members.
-
And if we scroll down a little bit, we also have the add button.
-
The click functionality should remain the same there too.
-
Although we do want to switch title here to character name as well, and
-
switch add crew member to add cast member there as well too.
-
Cool, so if we give that a save and jump back to our browser and
-
take a look at things, we should now see we have a crew member section as well as
-
a cast member section.
-
We should be able to add a cast member and it will add somebody in,
-
or we can select the cast member and give them some character name there.
-
The last thing that we have left to do is the actual store and
-
update functionality of the cast members here.
-
So if we go ahead and hide our browser back away, and
-
we'll first wanna jump into our movie validator.
-
And right here we have our crew, we can go ahead and give that section,
-
including the optional down there, a copy, give ourselves a new line, and
-
paste that in, changing the name from crew to now cast.
-
As that matches within our creator edit field,
-
what we have named these actual field names.
-
So that's the root key name and then inside of there is gonna be an array
-
of objects where we'll have an ID and a character name property inside of it.
-
So for our validator, we'll want to reflect that where we have an array
-
of objects with an ID and a character name property inside of it.
-
Since we are still working with Sinist,
-
the ID validator there can remain the same, so we're a-okay for that.
-
And we can jump into our movies controller now, scroll on down and
-
we can take care of our update first.
-
So in addition to extracting out our crew,
-
we also want to extract out our cast now.
-
Scroll on down a little bit further and give our crew members portion a copy and
-
a paste, changing the name from crew to cast and crew to cast there as well.
-
Then rather than having a title, we have a character name there.
-
And I'm gonna go ahead and give that a copy and
-
paste it where we have title there, as well as title there.
-
So that now we have character name in all three places.
-
Then we have a number of red squigglies going on, so
-
I'm gonna go ahead and give it a save, so that it formats.
-
And last thing that we need to do is add these to our movie,
-
just as we are here for our crew.
-
So we can await movie related cast members and
-
sync those in as cast members there.
-
Otherwise, provide in an empty array if none were provided.
-
Give that a save and that should be our update functionality done.
-
We can go ahead and scroll on up now to our store functionality,
-
which should be right up here.
-
And it looks like we left this out altogether.
-
So we're gonna wanna go ahead and account for it, so
-
we can extract our cast and our crew out here.
-
And we'll want this to take place after we have created the movie.
-
So we'll wanna grab a reference of our movie, so const movie there.
-
And the actual functionality is gonna be the exact same as we have within
-
our update.
-
So if we scroll on down to where we have this section, we could probably go ahead
-
and just extract this out into a service, so that we don't have to have this in
-
two separate places, as it's quite a decently sized portion.
-
So I'm gonna go ahead and cut this out.
-
And let's go down to our services, movie service, and
-
we'll just put this down at the bottom.
-
We can do static, async, and we can call this method something like sync,
-
cast, and crew.
-
And we can accept in cast and crew members, and
-
we'll fix the typing here for that in a second.
-
Let's go ahead and first just paste what we had in.
-
Okay, let's go ahead and scroll on up, and
-
now let's fix the types for our cast and crew here.
-
So I believe we should be able to infer this from our validator.
-
So we should be able to use infer.
-
Looks like we might already have that imported and
-
provided the type of our movie validator, and import that from our validator.
-
Now, this is our entire movie validator.
-
So if we take a look at the type here, it's gonna come back with our poster,
-
poster URL, title, summary, so on and so forth.
-
We just care about the cast here.
-
So I believe we should be able to reach into there and
-
specify that we just care about the cast type for that.
-
And now if we take a look at our cast type,
-
it's just an array of ID and character name or undefined.
-
So cool, that matches exactly what we're looking for.
-
Now we can do the exact same thing here for our crew.
-
So we can infer type of movie validator and reach just for the crew.
-
There, give that a save for formatting.
-
And let's scroll on down and see if we have any red squigglies.
-
We do, we aren't passing the movie in.
-
So we also want to pass the movie in here as well.
-
So that will be movie of type movie model.
-
Okay, so let's give that one more scroll through our method.
-
And now it looks like everything there is happy.
-
So we should be able to give that a save, jump back into our movies controller.
-
And let's now await movie service.
-
Remember, we set that as a static function, so
-
we don't need to instantiate our movie service at all.
-
But rather, we could just use this as a static method and call our sync cast and
-
crew, provide in our movie, the cast and the crew data that we have.
-
And now we should be okie doke.
-
Furthermore, if we didn't want to save our movie, if the cast and
-
crew failed or vice versa, we could wrap this in a database transaction as well.
-
So before we covered how you could do it with a try catch, but
-
there's also managed transactions too.
-
So for this, we could do await DB to reach for the database module dot and
-
call transaction.
-
And this accepts in an option to take a look at the overloads
-
that is a callback that's then provided in the transaction client.
-
And any operations that we perform inside of the transaction callback will then
-
essentially be wrapped inside of a try catch.
-
And if anything fails, then the callback will self manage itself and
-
roll back our changes.
-
And if the callback completes successfully,
-
then it will go ahead and commit the changes.
-
So let's run through that in practice.
-
So we have an async function that accepts in our TRX of transaction.
-
Then we provide it in a callback function.
-
We can move our movie merge data inside of there as well as our sync cast and
-
crew.
-
Of course, now we need to bind that transaction to these operations.
-
And we have an instance of our movie here.
-
And for our sync cast and crew, we're working with the relationship from our
-
movie.
-
So if we bind the transaction directly to our movie instance,
-
it will cascade through that relationship.
-
So we can just do movie dot use transaction here and provide it the TRX.
-
And now this save call will use the transaction off the movie model and
-
our sync cast and crew will use the transaction off of the movie model as well
-
because it directly works with those relationships right down here.
-
Awesome, so let's jump back into our movies controller.
-
I got an extra line right there I'm gonna get rid of, give that a save and
-
we should be a okay now for our update.
-
And now let's go and scroll on up to our store method right up here
-
as we need to do something relatively similar.
-
So we can go ahead and start with our transaction.
-
So await DB dot transaction, just as we did before,
-
this will be a sync function that accepts in our TRX for our transaction.
-
We can move our movie creation directly inside of there and
-
tell it to use this transaction via the second argument.
-
Remember client is how we pass this in so we can specify a client of TRX.
-
And now our transaction is bound into our movie and
-
it's gonna work the exact same way as it did for
-
our update by cascading through our relationships.
-
So we can now do await movie service dot sync cast and
-
crew pass in our movie instance as well as our cast and
-
our crew members from our validator.
-
And now we'll create our movie.
-
If everything with that completes successfully,
-
then we'll move on to syncing our cast and crew.
-
If everything with that completes successfully,
-
we'll then exit out of our callback function right here.
-
And the managed transaction will commit that to the database.
-
If we were to have a failure at either our movie or
-
our sync of our cast and crew members, this callback function will catch that error,
-
roll back our changes, and they won't be applied.
-
So this is definitely a cleaner approach to the try catch.
-
And this is referred to as the managed transaction as it's managing the commit
-
and rollback actions for us.
-
So cool, we'll give that a save.
-
And we should be a-okay to jump back into our browser now.
-
Now let's try to make some changes.
-
So we're already within an edit screen here.
-
So let's go ahead and try to add in a couple of cast members.
-
We'll do one there with a character name of maybe Clem.
-
And we can click on Add Cast Members to add a second one.
-
And it looks like it does not want to render out our second one.
-
So let's go ahead and inspect and open up our console here and
-
see what our error is.
-
So cannot access property after V is undefined expression members.
-
I'm not 100% certain, but I think the issue might be, and
-
I'm not sure why we weren't seeing this with our crew members.
-
But I think the issue might be that we're referencing the ID here,
-
which is the actual pivot table ID rather than the synist ID.
-
As the ID there would never change as we add more people.
-
So let's go ahead and hide our browser back away and
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!