Client-Side GraphQL in React

Querying Mutations Demo

Scott Moss

Scott Moss

Superfilter AI
Client-Side GraphQL in React

Check out a free preview of the full Client-Side GraphQL in React course

The "Querying Mutations Demo" Lesson is part of the full, Client-Side GraphQL in React course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates how to query a mutation, and explains that contrary to other forms of querying, mutations will contain arguments to let the server know what to mutate.


Transcript from the "Querying Mutations Demo" Lesson

>> Scott Moss: Mutations are very similar to queries, right? As far as, as far as graph fields concerned. Let's go look at, let's just stay inside of our tools here. I think the tools are pretty good. There we go, so stay inside here. I think this is super helpful to be able to come in here and like see what your app is hooked up to and experiment and try things and stuff like that.

One thing I wanted to note though is, if you click on this query section you'll see something called watched queries. And then, you'll see the actual query that I created by the operation name, all pets. If I click on it, you can see all this interesting stuff about it.

We'll get to watch queries later. But this is some of the magic that you get with Apollo, it's really awesome. And then if you look at the cache, then obviously, you'll see this stuff here, so pretty cool. Anyway, mutations are very similar to queries. They are a route type on the schema, which is like a query is.

And as for our API, the only mutation that we have is going to the addPet which takes a required new input type which is a name and a type. And a petType is enum, so it can be a cat or a dog. It's the only pets we support on this app right now.

We gotta raise some more money to support turtles or anything like that. So it's not gonna happen. But yeah, mutations very similar. So what you would do just to go over it one more time, just run mutation given operation, let's say, create a pet, something like that. Go away, go away.

There we go. So I created that. But unlike the query where we could just do that, and not really care about arguments or variables, remember, mutations, most of the time, I would say 99% of the time your mutations are for sure gonna have arguments. Otherwise, how did your server know what to mutate?

It has to know what to create, it has to know what to update, it have to know what to delete. And the only way you can do that is use passive variable and argument. So unless youre updating or creating something that doesn't need an info, youre probably gonna need some arguments for your mutation.

So youre gonna need some arguments here. In our case, it's called add pet so add a pet here. And then you need some variables, so in this case I would just name it new pet, something like that, call it whatever you want. And we know that it's supposed to be a new pet input.

I'm even going to say that it's required you have to pass us a new pen input. You can do that here. I'm putting this exclamation here, after new pet input to say that the Create a pet operation requires a new pet variable whose type is new pet input.

And required means, it can be known so its nano. So GraphQL won't execute [COUGH] this operation unless you pass a new pet variable whose type is new input type. So that's what that means. It's pretty much guaranteeing that you actually pass it your variable. In this case, addPet takes an argument.

We can see what mutation that is, it's called input. Right there, it's called input. So we'll take the input.
>> Scott Moss: Like that. And we'll set it equal to our variable which is newPet, like that. And then from there, you can just ask for whatever you want. You want id, always get the ID back.

And then mutations, so the thing about mutations is you can ask back for whatever you want with mutations. But what you wanna get right here, is you want to make sure that you think about when you're writing mutations. You really wanna consider the queries that you already wrote or the queries you will write.

The reason I'm saying that is because, you get a lot of things for free if the mutations that you do return the exact same fields that the queries before after this are returning. So basically, depending on what you're doing, if you're getting a list of data if you're getting one thing back or whatever you're doing.

You might not have to do anything to see an automatic update in your application. Because Apollo will be able to match the IDs form the results of your mutation and update them locally for you. And, if they have the exact same fields, then everything just works. If they don't have the exact same fields, it's not going to happen automatically for, and you're going to have to figure things out.

You might have to make an additional query depending on what that is. So we're gonna get into different strategies of keeping your cache in sync. But the easiest one is, just to have it happen for you automatically. And the simplest way to do that by default is just to make sure you return the same fields on your mutations, as you do on the queries that respond with the same data.

So for instance, we're adding a pet. Therefore, if we're interacting with a pet type, we have a query that gets all pets. It would be in our best interest to make sure that the query that gets all the pets and the mutation that's adding a pet, both return the exact same fields, therefore it'll be a lot easier for us.

It's not gonna give us It's not always done automatically based off for us. Because if you have things like list, like we do, we have to do some, some manual stuff. But if it was a one for one thing, like you got one pet and then you updated a pet, that'll happen for you for free.

So there are some scenarios where that stuff happens. But returning all the fields is a good point. And we'll get to a part in the app where, we can write a piece of a fragment that helps us not repeat ourselves and keep writing fields all over and over and over again.

We can just write it once and reuse it everywhere. So we'll do that. But for now, make sure you return the same stuff. So I'm going to say name tied and image. So I think that's what you want to query.
>> Scott Moss: And if I execute that, it's not gonna work, cuz I actually have to add some variables down here.

So the variable I need is newPet. NewPet takes in a name.
>> Scott Moss: We'll call it batman. I do know a dog named batman. It's a very terrifying dog. Add a type, which is gonna be a pet type of dog. There we go. So if I execute that, hey we got a new pet.

Right, so that's mutations.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now