Loading
Current section: Updating Data 6 exercises
solution

Efficiently Updating and Deleting Data in a Form with Prisma

Transcript

00:00 All right, so let's uncomment this bit. This is just pulling stuff out of our form submission. And the first bit of this is pretty easy. We're gonna await Prisma note update and where the ID matches the ID of that which is in the params, so that ID. And then we're gonna pass as our data

00:18 the title and the content. So whatever they passed that, that is the new title and content. So that's it for updating the note itself. That's pretty straightforward. We can be very excited that that works. Awesome. Okay, so then the next bit here is to update the, or to delete the images that have been removed.

00:38 So that right there, if I do that right now, we don't do that at all. So let's support that. So we're gonna await Prisma note image.deleteMany. And we're gonna delete that where the note ID matches the params note ID. And then the ID is not in those images that are receiving updates.

01:00 So we don't need to worry about the new images yet. They don't have IDs, but let's take all the images that we're updating and map those down to just their IDs. And anything that's left out of that was obviously not submitted as part of this submission. So it should be deleted now. So if I save that, refresh, then we delete this and then submit.

01:19 And that image is now gone. Awesome. All right, so moving on to the next step and that is to iterate through all the image updates and update the image. So for updates, we'll say image updates. I think in my solution, I say updates with an S. Obviously it doesn't really matter all that much.

01:39 Then we'll await Prisma note image update where the update image ID is correct or is the proper image ID. And here is our updates for our data. That was close, Copilot. That's actually not quite right. And actually it's a little bit more complicated than this as well.

01:57 So here we're gonna, you might just say updates and that actually does work, but we have a bit of a problem and that has to do with the caching. So let's just start out with the easy thing. If I add a bunch of exclamation points here, then we take a look at our alt text and we'll see we've got those exclamation points.

02:17 So we are updating the image. That's awesome. But let's change this so that we have a new image. Cuddling, we'll submit that. And we're not getting that update. If we look at the alt text, that alt text is being updated properly, but the image itself is not. And that is the problem.

02:37 So let's take a look at that image and I'm gonna do a hard reload. What? Yeah, see this is because we have that image in our cache. So to sidestep this issue, we're going to say pass in all the updates, but then it will update the ID as well

02:56 to say if the updates.blob. So if there's a blob included, then let's make a new ID with this qid utility. Otherwise we can say undefined. I think in my solution, I say updates.id. That's the same. We're updating it to what it currently is or letting it not be updated at all. Either one works just fine.

03:16 So this utility is gonna come from this parallel drive qid2 package. And so with that now in place, we will not have this problem again. So let's do a hard reload. We've got that image updated and then let's switch it to the cute koala. Cute.

03:36 And submit that. And we have exactly what we're looking for. Awesome. And now our last one is to handle image up or new images. So we're gonna go over all the new images and we'll create new images. So Copilot can do this for us. Pretty close.

03:57 Copilot thinks that we really want to have this qid, which honestly to me says, I probably need to comment this and say, bust the cache for updated images. There you go. Sure. Okay. So we're gonna iterate over these new images.

04:16 We're gonna create a new image for each one of those where the node ID is set to our current node. So if I come over here and say edit and add another image, we'll say soccer or football, as it is correctly said, sorry.

04:34 Now we've got image updates. Awesome. So one step at a time, we were able to update every single little thing that can be updated in this form using the update command and even the create command. This is precisely how I recommend doing this.

04:51 It is so much nicer to kind of finesse your data in this transform so that it's in a really easy place or state for us to perform this type of an update here. And yeah, that works out really nicely for us. So thank you, Kelly, the coworker,

05:09 and thank you for working so hard on this exercise.