Querying Mutations Exercise

[00:00:00]
>> Scott Moss: So the only thing you're going to need to know at this point is how, I mean, cuz we're in graphical right now. So they have this really nice auto completed section down here where we can add variables, but in React, in the code, how do we add the variables cuz we don't have this?

[00:00:13]
So that's the only thing you're gonna need to know. I'm just gonna give you a quick walkthrough. So if you follow along and you still have this, this is great because remember, you can write your stuff in here and just copy it in your code, and it just works.

[00:00:22]
If you ran into here and it worked, it's probably going to work in your code too. Because remember, what's happening in this Apollo DevTools graphical client is using the exact same client that you configure it in your client file. So whatever authentication, whatever middleware, whatever anything you have set up, it's probably gonna work the exact same way that it does here, so I always test myself in here first before I put in my code, it's a really good habit.

[00:00:47]
So in order to use mutations in React, you might notice there's a function up here called Use Mutation. This is also a hook. Remember, you don't really need to know much about hooks in order to understand what's going on. So the goal is to be able to go to our app here, click on New Pet, which goes to this model that's very tiny.

[00:01:11]
Over here, you can select a dog or a cat, and if you hit that button, it'll create one. Right now, it's not because I don't have anything there, so it only still have the three pets that I had. You need to get that to work. Don't worry about the React stuff, it's already hooked up.

[00:01:27]
You just got to make the graph kill stuff work. So in order to do that, you have this use mutation function up top. And the way you're going to do that is you're going to declare a variable. Actually, I'm not going to do it for you, I'll show you the answers.

[00:01:46]
You almost trick me. The usemutation function, basically, what it does is it's going to take a query, just like this one, just like we made all pets using the graph geotag. You're going to make another query that's going to be mutation this time, and it's going to look very similar to this, if not exactly this.

[00:02:06]
And then useMutation, its syntax is unlike useQuery. So useMutation doesn't return an object, it actually returns an array. And the only difference with this one is the first argument inside of useMutation is actually gonna be the mutation function, so this is where you're going to actually mutate something.

[00:02:25]
So I'll just write it out. So actually, I'll call it like createPet, you can call it whatever you want. The second argument is gonna be the same thing that useQuery has, where you get an object back that has a data loading and an error. And then you can do useMutation like that, and then you pass in your mutation, whatever you made up here, you're gonna make a mutation.

[00:02:53]
This createPet, or whatever you call this first argument, that's the actual function that's gonna make the mutation. When you call the useMutation, it's not actually going to do the mutation. Unlike useQuery, it will run your query as soon as you call useQuerry, useMutation doesn't run the mutation. The mutation happens when you execute this function.

[00:03:15]
Whatever your first argument is in your array, when you execute that, that is a function, when you execute that, that's when the mutation is going to run. So what you wanna do in your React app, there's this onSubmit function here that closes a model. Before or after you close the model, that's where you wanna execute your mutation.

[00:03:36]
This this onSubmit gets happened when you click that button on that model that creates a pet. So it's going to take an input. This input is going to have a type and a name for a pet. It's an object with a type in a name. So using that type in the name, you need to use this function, this mutation function here.

[00:03:55]
Like I said, it is a function. And it takes an object, and on this object exists a property called variables, the same variables that we have down here. See how we pass the variables down here, this exact same way with the same name that we created in our mutation, newPet, newPet, newPet?

[00:04:14]
That's what the variables property does here. And we get the variables that we want from this input. This input object is an object with a type and a name on it already guaranteed. We just need to find a way to pass it to our createPet mutation as variables.

[00:04:32]
>> Scott Moss: So once you have that, you're pretty much good. That's all you gotta do to do a mutation.
>> Scott Moss: Everybody follow me? Okay, now, you're going to do that and you're going to find out, although it did work, it didn't work the way you thought it was going to work.

[00:04:53]
You might not see your pet list update with the new thing that you created, that's intentional. You won't see it update in this use case, and when we get back, you'll figure out why that didn't happen, although you probably thought it would, but it didn't. But as long as your mutation works, usually fine.

[00:05:10]
Other thing to take note of, you still have to handle your loading and your error. So remember to handle that, it should be easy to just come in here and just be like, or this thing is loading. And don't do what I just did here, which is confuse these and override these variables here, I put data loading and error.

[00:05:32]
So Javascripting already have data loading error. Now, I'm declaring them again, so that's not gonna work. So you probably just wanna just maybe call this like newPet object. And then you can like, newPet.data, newPet.loading, newPet.error, something like that. Or just, if you're feeling like writing a lot of variable name changes you can just come in here and call this something else, like that.

[00:05:56]
If you fancy that, so it's a lot, but you can do that too, up to you, but just don't give them the same name because it won't work. Let's go to this, put pet on my newPet. There we go. Cool, everybody understand what they're doing. So when you do that the result should be exactly the same as what I did here.

[00:06:19]
There should be a mutation that returns the data, and if you were to go look in the database in db.json, you would actually see it pop up just like this one did.