Okay, let's continue and start working on our mutations. So let's start off with creating a Post. So let's make a new page for that. Let's just duplicate one of these for now. Let's say create.vue. And for now, let's just say create page here. Okay. And let's go ahead and add this route to our router. So let's duplicate this one. Let's say create.

So let's duplicate this one. Let's say create. And let's name it create as well. And let's set it to this new page that we just created. And let's add it to the menu on top. So let's duplicate this. Add a pipe here. It goes to /create and create here. Okay. And if you go to that page, this is where our form will be.

Okay. And if you go to that page, this is where our form will be. Let's quickly create that back to our create form. This is createPost. And I'm going to put a section here where the error is going to go. Let's give it a class of error. This is the error. We'll work on this later on. And with it in here, let's create the form. So I'm not too focused on styling in the series, so it's going to be a bit ugly and I apologize.

And with it in here, let's create the form. So I'm not too focused on styling in the series, so it's going to be a bit ugly and I apologize in advance. Let's make a form. Action is whatever. And let's say submit.prevent equals createPost. Okay. Let's go ahead and make a section for the title. Let's make a label here. Say title.

Let's make a label here. Say title. Say title here. And our input for the title is going to be text. The name is title. And also the ID. Let's make another section here for the body, except it's going to be a textarea. Change this to body. And let's change this to a textarea.

And let's change this to a textarea. textarea. So name is body. ID is body. And this is fine for now. And one more section for our submit button. Let's make a button here. Let's say create post. Okay. Save that.

Okay. Save that. And let's see if it renders in the browser. Okay. Let's go ahead and add some state for our error, as well as the title and the body. So let's put a v-model on the input here. So v-model equals title. And also for our body. So for the textarea, let's add one as well. Let's go ahead and add this state in our script section down here.

So for the text area, let's add one as well. Let's go ahead and add this state in our script section down here. Let's make a data method. And this is going to return our state. So we have title, empty string for now. body is empty as well. And we have an error, which is null for now. Okay. Let's also create that createPost method.

Okay. Let's also create that createPost method. So let's make a key here for methods. Say createPost. And it's just console.log. Creating post for now. Okay. Let me save that. And let's make sure that the method is being called. So let me open up DevTools here.

And let's make sure that the method is being called. So let me open up DevTools here. Let's refresh this page. Let's hit createPost. And there it is. Now to actually do the mutation, we can make use of the mutate function within Apollo. So we can do this $Apollo->mutate. And the first param is this object. We can say mutation as a key, as opposed to query, like we were doing with queries. And we're going to do GQL with backticks like we've been doing.

We can say mutation as a key, as opposed to query, like we were doing with queries. And we're going to do GQL with backticks like we've been doing. Our mutation will go in here. And after that, our variables can go in this variables key. Okay. And this function is actually a promise. So we can say .then. This is the data being returned. Let's grab that data for now. Let's just console.log it.

Let's grab that data for now. Let's just console.log it. And then we can do the error case as well. So that catch error. And again, let's just console.log that. console.log error. Okay. So let's make sure to import GQL. So I believe we have it here. Look for the import statement.

So I believe we have it here. Look for the import statement. So this right here. Let's grab that. Let's put it up here. Okay. Now, let's add the actual mutation code for creating a Post within here. So let's go back to GraphQL Playground. And I have it up here. Let me just make sure it works.

And I have it up here. Let me just make sure it works. So I'll hit play. And it does work. So we can grab this entire query or mutation. Let's paste it within here. And again, if we have params in our query or mutation, then we have to make a few changes here. So let's name our mutation. So let's name it createPost, actually.

So let's name our mutation. So let's name it createPost, actually. And this will have the types that it accepts. So in this case, the userId, that's going to be an ID, it's going to have a title. That's a string. And it's going to have a body. That's a string as well. Okay. Then within here, we can use those variables. So instead of hard coding this, we can say userId, this can be the title.

Then within here, we can use those variables. So instead of hard coding this, we can say userId, this can be the title. And this is the body. And we don't actually need the commas here. So let me remove those. Okay. And that should be good for now. If I save, hopefully, Prettier will reformat this and it does. Let's make sure to accept our variables down here. So we have three, we have our userId.

Let's make sure to accept our variables down here. So we have three, we have our userId. And for now, we're just going to hard code one. And then later on, we'll work on authorization. Let's add the title as well. So again, we have the v-model that's being used. So we can just use that. So this title and same for the body. Okay. Now after that resolves, I want to go back to the homepage.

Okay. Now after that resolves, I want to go back to the homepage. So let's do that here using the router. So this router push to the homepage, and I'll make use of my name to routes here. And the name is home. Okay. Hopefully, I did that correctly. Save that. Let's give it a try in the browser. So back to our app, let me just refresh this to make sure we'll work on errors in a second.

Let's give it a try in the browser. So back to our app, let me just refresh this to make sure we'll work on errors in a second. But let's see if we can actually create a Post. This is a new Post content for new Post, create Post. And we have an error. Okay. It says expecting type string required that I forget that looks like I did here. Save that. Try this one more time. This is our Post content here.

Try this one more time. This is our post content here. And it looks like it does work. So here's our console log. Actually, you can see in the browser that our new Post is right here. But you can see the data being returned right here. Cool. And if you want to double check, we can check our database for that post should be ID of 67. And there it is.

67. And there it is. Cool. Now let's work on the errors. For example, if I were to leave this blank and hit post, we do get this error here. But I want the error messages coming from Laravel so I can display them here. So how can we do that? There's actually a field on the errors object called graphqlErrors like this. And that will return Laravel's errors. So let's try that again.

And that will return Laravel's errors. So let's try that again. And now you can see this object with the message and each error type. So it's within here, I believe the validation and you can see the error for the body and the title because they are required. I just want to grab the first error here and display it here. So let's do that quickly. So I need the first key and I'll just put it underneath here, say const key. We can use Object.keys. And again, we're grabbing that graphqlErrors object.

We can use object keys. And again, we're grabbing that graphqlErrors object. We're grabbing the first one. I believe it's an array. It is. So say 0 here. And we have extensions and validation. And I just want the first one. So let's say 0 here. So that's the key.

This is just a simple explanation with no code.

Okay. So there's no error. Let's hit createPost. Title field is required. If we add a title and hit post again, the error changes. So that is working. Now for the loading indicator, unfortunately, we have to do this manually if we're using mutations this way. Remember, when we were using queries, we had this option here. So we can say Apollo queries, the name of the query, and then loading to check if that

Remember, when we were using queries, we had this option here. So we can say Apollo queries, the name of the query, and then loading to check if that state was loading. But like I said, for mutations, if we're doing it this way, then we have to do it manually. So let's quickly do that. Let's just add a piece of state called loading or isLoading. Loading is fine. Let's say false by default. Let's go ahead and set it to true right before we create the post. So right here.

Let's go ahead and set $loading to true right before we create the post. So right here. So this $loading is true, and then we can set it to false again after the promise resolves. So in here, false, and also in the error, let's put it right here. So now we can add a loading indicator in the template. So I'll just grab this one here and just use our own state. So let's just put that beside the button somewhere, or underneath is fine, or this might render next to it. And the state is just loading. So let me remove all of this.

And the state is just loading. So let me remove all of this. And let's see if we can see that even though it's really quick. So let me refresh. Let's say checking loading indicator testing, and let's make sure it runs. And I did see it. Now there's also another way we can do mutations using the ApolloMutation component, which is similar to the ApolloQuery component we took a look at in the last video. So I'm not going to do this in our code, but it's pretty much the same as the ApolloQuery, except it's a mutation now.

So I'm not going to do this in our code, but it's pretty much the same as the Apollo query, except it's a mutation now. And the template also has support for the loading indicator, which we just had to do manually. So again, if you want to do your mutations this way, you are free to do so as well. So I think I'll stop the video here. We'll work on updating and deleting our posts in the next video. So say git add, git commit, let's say mutations, create post.