Okay, let's continue our mutations and work on updating posts. So let's go ahead and create a new page here. So I'm going to duplicate the post page because we need to grab the post that we're updating. And this page already has the query that we need to fetch that post. So we'll duplicate this, we'll call it update. And for now, let's just say this is the update page. Okay. And let's just get rid of everything here. And also this Apollo query component we don't need. Let's save that.

And also this Apollo query component we don't need. Let's save that. And let's go ahead and add this page to our routes. So let's say route. Let's add a new one for update. And the path is going to be post/{id}/edit, the name is going to be update. And the component is Update. Okay. Let's go ahead and link to this from, let's do it from the Post page here. So let's just add a link from within this Post page here.

Let's go ahead and link to this from, let's do it from the post page here. So let's just add a link from within this post page here. So let's go to post. And let's just put it right here. So let's make a new container for the router link. Let's use that router link component. And we'll say to equals, actually, I think I have this in my home view already. Yeah. So let's just grab this. Let's paste it in here.

So let's just grab this. Let's paste it in here. We are going to the update page. The param is, we can just say whatever is in the URL. So route.params.id. Okay. And the name of the link is going to be update. Okay. Let's see if this works. Okay.

Let's see if this works. Okay. So there it is. See if it goes to the update page. And it does. Cool. Okay. So there it is. And that's going to be similar to the create form that we have. So we can just grab that.

And that's going to be similar to the create form that we have. So we can just grab that. So let's grab this entire form to copy that. And let's go ahead and paste it in here in our update page. Don't need this anymore. Space that in. And when we submit the form, let's call it an update post method. Okay. So for now, let's set the v-model to postTitle. Remember, we have that Apollo query that grabs the post right here.

So for now, let's set the v-model to postTitle. Remember, we have that Apollo query that grabs the post right here. So we have this post variable. And let's say the same for postBody. Okay. And I think we need this loadingState as well. And we also need the errorState. So let's add that above form.error. Say error here for now. And let's add the loadingState in here.

Say error here for now. And let's add the loading state in here. I guess I don't have a data key. So let's add that. Okay. data. Return. loading. false. Okay.

False. Okay. Does this work? Let's check it out in the browser. And this is the information about this current Post. Now if we open up DevTools and try to change one of these fields here, you see we get this error. That's because we're trying to change the v-model on a read-only property. So let's go ahead and fix that quickly. So instead of using post.title and post.body in the v-model, let's just create our own.

So let's go ahead and fix that quickly. So instead of using post.title and post.body in the v-model, let's just create our own state for that called title and body. Okay. Let's go ahead and add that to our state here. title is empty to start, so is the body. And let's also add the error here, which is null to start. Okay. So remember, we also have this post variable, which gets populated after this query is run here.

So remember, we also have this post variable, which gets populated after this query is run here. So we can actually watch that variable using a watcher. So we're watching post. When that changes, we'll have access to this new post, which gets populated after this query resolves. And we can just assign our state here. So this.title equals new post.title. And same for our body. Okay.

And same for our body. Okay. Now we should be able to change the data in our form. So let me refresh this. Testing. And there's no more error. Okay. So now the mutation for updating Post should be similar to the one for creating Post. Let me change the button name first. Create Post.

Let me change the button name first. Create Post. Let's change it to update Post. And I believe I already have that method set. So update Post. I do. So we just have to create it. So let's make a methods variable after Apollo. And we'll just grab the one from create Post and modify that. So create Post.

And we'll just grab the one from createPost and modify that. So createPost. Let's grab all of this. Where does it end here? Right here. Let's go ahead and paste that in. Let's change it to updatePost. And obviously we have to change the mutation as well. So let's change the name here. It'll be updatePost.

So let's change the name here. It'll be updatePost. The params are the same, I believe. Actually no, they're not the same. This should be the postId. And again, we'll work on authorization in the future. The title should be the same and the body should be the same. Let's change this to updatePost as well. Again, this should be ID. Okay.

Again, this should be ID. Okay. And I thought I removed these commas, but I guess it still works with commas. So I'll just leave it there. And let's make sure to update our variables here. So we have the ID coming from our route. So this will be this.route.params.ID. Okay. And after that resolves, we can do the same thing and push to the homepage. And did I set this loading indicator up here?

And after that resolves, we can do the same thing and push to the homepage. And did I set this loading indicator up here? Yeah, I did. Okay. I just copied it from the create page. So I guess we can grab the template code for that as well. Right here. Let's just put it next to the button for updating Post. Oh, it's actually there already because I just copied it. Okay.

Oh, it's actually there already because I just copied it. Okay. So hopefully I did that correctly. Let's see if we can actually update our Post. So save this prettier formats. My code. Let's refresh this. Okay. No errors. Let's say change here.

No errors. Let's say change here. Let's add a change to the body as well. Let's update the Post and we do get an error. And if you look at the error, it looks like I'm still using userId somewhere. userId. I forgot to update this one. So this should be id. Okay. Let's try that one more time.

Okay. Let's try that one more time. Refresh. Change. Change update. We are redirected back to the homepage, and it looks like the update did go through. Let's click into this to make sure that it changed. And it looks like it didn't update this. And I think that's just a caching error. So if I refresh, it did update the body here.

And when we're querying, we wanted to follow this fetch policy, which says cache and network. So try to grab it from the cache first and then update it if there's anything fresh from the network. So we can actually do this in our app. Let's just grab this defaultOptions key. Let's go back to VS Code. Let me just hide this. So that goes where we instantiated viewApollo. So in our main.js, so we can just put it right underneath our defaultClient here. So let's paste that in.

Okay, let's update. This changes. Hopefully, it changes automatically when I click into it. And it looks like it does cool. Let's also add an option to delete our Post to finish off our CRUD functionality for our Posts. So pretty straightforward. Let's put it underneath update here on the Post page. So let's say post. So let's put it right underneath here.

So let's say Post. So let's put it right underneath here. I'll just make it a button, say deletePost. And again, we'll work on authorization later on. Let's put a method on this called deletePost. Okay. Let's go ahead and add that method down here. Do I have a methods key here? I don't. So we have to add that methods, deletePost.

I don't. So we have to add that methods, deletePost. Okay. And again, it's pretty much the same as updatePost, but for deleting our posts. So let's grab everything and updatePost from here. UpdatePost. Let me just grab everything, including the method signature. Grab all of this, remove this, rename it to deletePost. Okay, let's just update the names here. So deletePost is the mutation.

Okay, let's just update the names here. So deletePost is the mutation. We only need an id. Let's get rid of this. Same with this. It should be deletePost. Again, we only need this id here, and we only need the id for our variables. Okay. And again, when it's done, I want to push to the homepage, and I don't think we have state for errors on this page.

And again, when it's done, I want to push to the homepage, and I don't think we have state for errors on this page. So I'm just going to comment this out here. Okay. And we also don't have a loading state. Actually, let's just put that in. Do I have a data key? I don't. Let's add it here. Let's just work with the loading one.

Let's add it here. Let's just work with the loading one. Return false. Okay. And hopefully I did that correctly. So when we delete a Post, if the mutation is successful, it should redirect us back to the homepage, and that Post should be gone. So let's give that a try back here. This is post 68. Let me refresh.

This is post 68. Let me refresh. There it is. Let's try deleting. And 68 is now gone. Let's double check our database here. And there is no 68. Okay. So that is working. For updating, I think I forgot to add the error.

So that is working. For updating, I think I forgot to add the error. So let's work on that. Update. So, for example, if I don't add any content here, the error should show up here. Okay. So let's update. Okay. So let's update. Okay.

So let's update. Okay. So let's update. Okay. So let's update. Okay. So let's update. Okay. So let's update. Okay.

Okay. Error. Let's try that again. Update. And there is the error. Title. Cool. So, yeah, that concludes our CRUD functionality for Posts. We are now able to create Posts. We can edit Posts.

We are now able to create posts. We can edit posts. And we can delete posts as well. Let's double check one more time if this works. This is our post edit. Content here. Edit. UpdatePost. There it is. The cache works as well.

There it is. The cache works as well. And delete should work as well. There we go. So, as always, let's make a commit here. Let's say git add. git commit. Mutations. Updating. Updating.

Updating. Updating. And deleting posts.