Advanced GraphQL Advanced GraphQL

Querying the Solution

Check out a free preview of the full Advanced GraphQL course:
The "Querying the Solution" Lesson is part of the full, Advanced GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates querying the solution and discusses different ways to query in GraphQL.

Get Unlimited Access Now

Transcript from the "Querying the Solution" Lesson

[00:00:00]
>> Speaker 1: Could you write the mutation query again?
>> Scott Moss: The resolver?
>> Speaker 1: In the playground, the actual, showing us the query.
>> Scott Moss: I see what you're saying, let's do this, I'm gonna show you two different ways to write a mutation. So there's a long way, this is what I call the long way, and the reason I call this the long way is because it's basically what's called a named operation.

[00:00:25] You get to give these functions in JavaScript, you can have a named function and then you can have an anonymous function, like a one-off function that has no name, like a callback. That's basically the two differences, this right here, you get to give it an anonymous operation, there's no name, we just run an operation just one-off.

[00:00:43] But when you start using client side applications like Apollo, they actually use the names of the operations to do caching. So you wanna name those things so you can take advantage of caching. So I'm actually going to make a mutation with an operation name here. I'm gonna call this one, and you can call it whatever you want, this is just like naming a function.

[00:01:01] It doesn't have to be a name of a mutation, it doesn't have to be a name of a query, it could be anything, doesn't matter. You should keep these unique so your caching strategies work, so I'm gonna do that. And then because this mutation takes in arguments what I wanna be able to do is I wanna pass in variables from the outside of this mutation.

[00:01:24] For instance, in JavaScript I'm using React, so I wanna be able to pass in variables from props or something like that. So these variables are going to be coming from the code, so I need to be able to pass them in, just like a function would be able to do that.

[00:01:36] So at first I need to describe what those variables are. The first thing you do is you use a dollar sign, this is telling GraphQL that this is a variable, this is a placeholder for something that's gonna come later. And you put a dollar sign in front of it and you can call it whatever you want.

[00:01:51] I like to call my inputs inputs, you'll see why when we start making resolvers. So let's keep them all inputs, otherwise it gets really confusing and your resolver is trying to figure out where the variables are, so we can call that input. And then you need to give it a type, for this, I'm gonna give it the same type as the mutation that we're writing.

[00:02:08] So if we go back to our coder, this takes a NewAnimalInput, so that's the type that I'm gonna give this variable. And we can also, let me save this, and refresh.
>> Scott Moss: Okay, refresh again, there we go. So if we go look here, you can see that the NewAnimalInput is this shape, so that's how we know what the type is because it is telling us NewAnimalInput.

[00:02:35] So I'm gonna do that, I'm gonna say, mutation, call it anything you want.
>> Scott Moss: Go ahead and give it an input variable whose type is NewAnimalInput. And if there was an exclamation here, I would also put the exclamation here cuz it freaks out on that too, so I'm not gonna do it cuz it's optional.

[00:03:02] And then now I actually write the mutation, which is actually called newAnimal. So then I'll say NewAnimal, and then we know that NewAnimal takes in, as its only input, something called input, whose type is NewAnimalInput. So if you go back and look, what do we have here that is a type of NewAnimalInput, or we have this variable called $input?

[00:03:27] So for the named input on NewAnimal, which is actually called input, that's the name of it, we're going to place that here. And then we're gonna say, you are actually gonna be represented by this variable called $Input, so that's how that gets matched up. And then now we can spread this out and we can do that thing.

[00:03:53] So that's how you would write the mutation the long way with a named operation. Which is what you would do if you were actually consuming this API and anything that was caching like relay or Apollo, you would absolutely do this. Otherwise your caching strategy would be pretty difficult.

[00:04:10] And it's easier just to build a debug by operations, also caching strategies and tracing also looks at things like operations to let you know. What operation is performing, what operation is cache. So you could think of this word right here as the operation name. And when you get the AST, if you were to look at the operation name, that's what this would be, it would be this thing, so that's the long way.

[00:04:33] The short way is to just do mutation like this, open the object and then use this, write your mutation. But because you don't have variables you gotta like put it in here inline like that, and that's the short way. But there's no name on this, it's like an anonymous mutation.

[00:04:52] So it's really good for testing things out and stuff, but if you're gonna use it in applications with caching, always use the names.