Current section: Updating Data 6 exercises

Updating Page Mutations for Images and Notes with Efficient Cache Control


00:00 Now we want to be able to update this page so that those mutations will go through. This one's a little bit more complicated, though, because we do have the note, but we also have all these images and you can delete images, you can add images, you can update images. So there is a fair bit of, yeah, challenge with this one. But it's going to be fun.

00:19 We're going to be doing a couple mutations as part of this. And I think you're going to have a good time. The one thing that I'm going to call out for you for this first step of the exercise that may be a little bit confusing is that when we change an image, we are currently setting the URL for these images as including the ID here.

00:39 And so when these images are cached, that ID is going to be important with the cache control. So if we look at the headers here, let's scooch this over a bit. Then we look at our cache control has a max age of a year and it's immutable because that ID, that was a contract we made originally was we said, yeah,

00:56 this is like once it's set in the ID, that image binary data will never change. Well, now we actually that technically can change. So we have a choice here. We can either say, OK, we no longer have this cache control, which would be pretty bad. That means our server is constantly streaming images to the same browser over and over again.

01:16 Even if we put a CDN in front of it now, like there's no cache there. So, yeah, definitely we don't want to do that. And so what we can do instead is we just say, OK, whenever there's an update to the image itself, we just change the ID for that image. And so then we don't have that problem at all, that that cache will get expired whenever it gets expired.

01:36 But we'll get the updated image because we have the updated ID. So that's one tiny bit of complication that we're going to be having with with this exercise. But other than that, it should be pretty straightforward. You're going to first you update the image or the the note itself. Then you delete the images that were removed because those won't be submitted as part of that form submission anymore.

01:57 Then you update the images that were updated. And that includes if those images include files. We're also updating those or, you know, whatever updates those images have. And then finally, creating new images. Now, I'll mention one last thing before I set you off on this one,

02:14 and that is that Kelly has done a fair bit of work for us to make this a bit easier. So there are a couple of utilities that she wrote for us. And she updated our note editor schema to have a transform on it so that we can convert the form submission into an object that makes it much easier for us to work with.

02:34 So we take all we take all of that data that we have. But then we also have the image updates. So these are the images that have an ID. So the existing images. And if it has a file, then we're going to read that file into a blob, into a buffer.

02:51 If it doesn't, then we'll just take the ID and the alt text. So like the regular properties. And then we also are going to have our new images. And this will be only those images that have a file that do not have an ID. So these are really the new images. And we're going to do something similar to what we do with the updated images

03:10 where we grab the alt text, the content type and the blob. And then from there, you're able to take those values and much more easily update data in the database. So thank you, Kelly, the coworker. All right. Let's get going on this one and we'll see you when you're done.