Use urqls useMutation to Create Github Issues in a React App
In this lesson, we create an input component so that the user can create comments by typing into an input.
We create a GraphQL mutation with urql's useMutation hook. We pass the mutation query to the hook. The hook returns a function that we can pass to our input to fire when the user submits the form.
Instructor: [0:01] We can copy our mutation now inside of our app. I'm going to open a new terminal. I will LS and touchSource/components/input.js. I'll open it. We'll import React from React. Now we'll have a function input. This is going to take an onSubmit.
[0:45] We will return a form. The input will have a value we'll define, and then an on change that we will also define. Then we'll have a button, have type equals submit with a text of submit. Our form will take on submit.
[1:23] It gives us an event. We don't want the page to reload when the form submits. We'll go e.prevent default. This is where we will call onSubmit. Now, we need to create the state that is controlling this input, so we'll go const value and set value equals React.use state.
[1:55] It will be an empty string, so the value will be value. When the form submits, we want to pass the value to our onSubmit handler. Next, we want to set the value to an empty string again. Now, we need to handle when the input changes.
[2:21] Up here we will go const handle value change equals a function, which takes an event, and then on that event, we will call set value e.target.value. Then, we can't forget to export default input. Let's head over to our app, and we will import input from component/input, and we will render our input right here, and our onSubmit will be console.log for now.
[3:22] When we head over to our app, we have an error. We forgot our error function. We'll save it. There we go. It doesn't look great. Let's open our developer tools. This is a comment. Open the console, and here's the comment.
[3:51] Now, inside of our input.js file, we will call const new comment mutation equals. We'll paste-in our mutation, and up at the top, we will import use mutation from URQL. We'll define a new component called function new comment input.
[4:45] Const, we'll call our use mutation, passing in our new comment mutation. Use mutation returns a mutation result, and in the second index in the array, execute mutation. You'll notice that we aren't passing variables here into the mutation. That is because this execute mutation function takes any of the variables that our query has defined as arguments.
[5:30] Let's create a const handleSubmit function. This handleSubmit function will take the body of our text, which is the value, our input or return, and call executeMutation. We can pass it an object with subject ID. Let's go grab this subject ID. We'll hard code it for now and the body.
[6:16] Now, we will console.log our mutation results to see the result of our mutation. Next, we will finally return an input with an onSubmit of handleSubmit. Now, instead of exporting this input component, we'll export our new comment input.
[6:48] We'll go over to our application, we'll open the development tools, and then we can see our mutation result is returning its default state. When we comment, we can see that the result gets pasted in here. We can also see that URQL has refetched in our Network tab. You can go over to general and you can see that it refetched this comments list query.