![Client-Side GraphQL in React](https://static.frontendmasters.com/assets/courses/2019-12-03-client-graphql-react/thumb.webp)
Check out a free preview of the full Client-Side GraphQL in React course
The "Query Operation" 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 write a query operation in GraphQL by declaring a variable, and setting a variable's type and value.
Transcript from the "Query Operation" Lesson
[00:00:00]
>> Scott Moss: Now, let's get into the variables with operations. So let's talk about operations, operations can also define arguments. Quick refresher on arguments. So if you ever use arguments before in graphical query, you know that you can just use parenthesis like this and you can pass arguments. So for instance, characters query takes in a page and a filter.
[00:00:27]
So if I were to go into my arguments and I were to type in page like this, I could and it says and so, I can do something like to and that's an argument. It's gonna do that for me, but I had to hard code this number two in there.
[00:00:43]
What if I want the number two to be a variable that's dynamic that's coming from my application? Well, that's where variables come in. So variables are substitutions for arguments that can be passed in dynamically, at execution time from your application. So to define variables, at least in graphical playground, we can do is we can click on the query variables below here.
[00:01:04]
And we just create an object that represents or fulfills the need of the variable name that we're gonna create up here. So we'll go to the operation, we'll put the parentheses up here. The first thing is, you have to use this dollar sign here. This dollar sign represents that you're creating a placeholder, just like you would in argument in a function in JavaScript.
[00:01:25]
You can name the argument whatever you want, that's exactly what we're doing here. We're describing arguments that all characters operation can accept and we can name them whatever we want. We just have to put a dollar sign in front of the verse. So I'm gonna say, I'm gonna call this one, I don't know input.
[00:01:43]
So this takes a variable called input or actually lets just start with page. This takes the variable called dollar page and from her, we have to give it a type. So I know that the page argument that's passed in the characters query isn't int, so I'm also gonna say this isn't int.
[00:01:59]
Like that or we'll just figure now, yeah, so far that's good, we got the page, you got the int. This is just freaking out, cuz its saying, hey, you declared a variable, but you're not using it yet. And that makes sense, cuz we're not using it yet. So now, what I'm gonna do is I'm gonna remove this too and in it's place, I'm gonna put page, the dollar page.
[00:02:22]
So again, this is me declaring a variable or an argument for the operation calls all characters. I'm setting it's type to int which is the same type the argument characters query's expecting as an input and I'm setting its value to that variable. Now, I actually have to create that variable.
[00:02:38]
So down here in the query variables, I create an object and you can see I get all the complete right there. That's the sweet thing about having a type safe language there. So page, and then I can also put a number there. Now, when I execute this, it should get back the same result, if I change this to another page, get back a different result, boom.
[00:02:59]
That's how variables work. So I'm sure you can understand the benefit of variables, we're able to basically make our queries and mutations dynamic without having to change our queries or mutations. We don't have to write a whole another one just to get the second page and write another one to get the third page.
[00:03:13]
We just inject some variables that are substituted execution time through the arguments, which is pretty pretty helpful. Any questions on the variables in arguments combined with the operations? Yes, Adarsh.
>> Speaker 2: Can we pass in objects as well?
>> Scott Moss: Yes, you can pass in objects, so that's a good question.
[00:03:33]
So let's look at, so we know that the characters takes an info or that's type characters, hold on. Let's click, here, here we go, so now, that characters takes a page and a filter, right? So we could pass one option that has both of these props on it.
[00:03:49]
But I know filter is an object, so let's look at filter character. Filter character has all these properties, so let's do that. So it has a name, a status, species, all that stuff, so let's do that. So we'll define another argument up here and we'll call it, just give it the same name.
[00:04:04]
So my convention that I use, I usually name the arguments. I'm sorry, I usually name the variables the same name as the arguments, that way I don't get them mixed up, honestly. So that's just my convention, I mean, you can name these whatever you want. So for filter, I know that it's gonna use a $filter [SOUND] or what was it called?
[00:04:25]
A filter character type, so I'll just do that filter.
>> Scott Moss: If this warning goes away. [LAUGH] Character, filter character type here, and then down below, if I type in filter, it automatically complete it. And it's a filter character type, which is an object, so I can do an object.
[00:04:47]
And as you can see some of the start typing, I get autocomplete for that as well. So I can say cool, I wanna filter by name, and then for the name, I'm gonna put, let's just grab one of these, Roxanne says. Like that and now, all I have to do is just add that variable to an argument and I know that the characters query takes a filter argument whose type is filtered character which happens to be the filter argument that we created.
[00:05:17]
So I can just do that, now, if I execute this I just get back Rick Sanchez.
>> Scott Moss: Any questions on fields or arguments, variables and operations on queries? This works the same way with mutations as well, there's no difference. Exactly the same, it's also works if you had, arguments on the field level, you could also pass your variables here as well.
[00:05:46]
If this thing had a page for some reason, you could do that, it doesn't matter. Everything, these variables that you created are scoped with inside this operation. So anything in this operation can take advantage of these variables.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops