![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 "Operation Names" 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 defines operation names as unique names for the GraphQL client side query and mutation operations. Operation names are used by tools like the GraphQL playground to reference different operations.
Transcript from the "Operation Names" Lesson
[00:00:00]
>> Scott Moss: But now we're gonna talk about Operation Names. So if you've done the GraphQL stuff on the server, you might have got to the point where you were writing Querys in playground and things like that. But the way you might have done that were just like the short hand method of writing Querys and writing Mutations.
[00:00:17]
What we're gonna do is we're going to use the full way, the full approach of writing Querys and Mutations, starting with something called Operation names. So Operation names are basically, unique names for your client side Querys and Mutations operations. What does that basically mean? So if you could think about it like this, if you create a function in JavaScript and you just had a variable.
[00:00:39]
But you didn't actually name that function, that function is technically anonymous even though the variable has a name. That's basically what you're doing in GraphQL. So to translate that, this query right here for characters, it doesn't have a name. I mean the query is called characters, but the option itself doesn't have a name, it's anonymous.
[00:00:57]
So we could actually give this operation a name by using the operation name syntax in GraphQL. And the way we can do that is, so we get rid of this query. The first thing we want to do is, we want to type the name of the operation we want to do.
[00:01:12]
In this case, we're going to type the word query. Query means hey, we actually want to execute a query, because there's different types of operations. We have mutations, we have subscriptions. We're interested in executing a query, and as a refresher, queries are responsible for retrieving data from a GraphQL API.
[00:01:29]
So in this case, we wanna retrieve some Rick and Morty data, so we're gonna issue a query. And then, we can just give it an operation name. And the operation name is pretty much, you can name it whatever you want. The restrictions on it is that you can't have any spaces or dashes, anything like that.
[00:01:44]
But you can kinda name it whatever you want. The convention is most people just camel case or pascal case this. So let's call this a, we'll call this all characters. Like that, all characters. That's the operation name. And then, followed by that, you might have an optional arguments here.
[00:02:05]
We're not going to use arguments right now. Instead, we're just going to hit enter and we'll use these brackets. So, now that we have our operation named all characters, now we can actually run our query. And the query that I want to run, if I go look at the schema.
[00:02:18]
Here's all the queries that's possible on this API. So I'm going to run the characters query which takes in optional arguments of a page. I'm guessing for pagination and to filter if I want to filter out a character. So I'm not going to pass any of those arguments right now.
[00:02:35]
And I'm just going to execute the query called character, like this. So once I run character, I can now go ahead and ask for some fields on the character. What fields do I have? Well, if I go click on a character,
>> Scott Moss: Here, you can see that characters have an info.
[00:02:54]
Well, I'm sorry this thing returned type characters which has info and then results. And then, you have for results an array of characters which is an ID of names and stuff like that. So what I want to do is I want to go ahead and get the results, or I'm sorry, get the ID like this so if I hit enter, run this, I got a null for that.
[00:03:16]
So, let's try a name and see what happens when we use that Name is null. Maybe this API is just not feeling it right now. I'm sorry, I wrote in character. I need characters, there we go. Then, we get the results.
>> Scott Moss: And now, we can do something like gimme the name, gimme the episode.
[00:03:41]
Our episode is an object type, let's just do name. And now we get characters, results, an array, and we get the name Rick and Morty. So, this is an operation name. So, a couple of things to note here is you note that the tab up top reflected the name of the operation.
[00:03:56]
And that's kind of the point of a operation name. Operation names are used for client side caching, which we'll get into. And indexing inside of tools like GraphQL playground, which is what I just showed you. So, having the operation name is a way that tools like GraphQL playground and Graphical can reference different operations that you're trying to run.
[00:04:15]
So keeping those names unique Is a really good practice. And in fact, when we get to client side caching and stuff like that, you definitely want to keep them unique. Otherwise, you will have conflicts with like state and things like that. So, make sure you have those operation names unique.
[00:04:31]
So, naming your functions just like in JavaScript versus keeping them anonymous.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops