Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to GraphQL!
You have completed Introduction to GraphQL!
Preview
In this video, we will make our named mutations even more flexible with variables.
Course repo: Use this GitHub repo to follow along with this video in the course
(Apollo's Launchpad has been deprecated, so your screen will look different)
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In previous lessons, when we were calling
an end point that required arguments, we
0:00
specified those those arguments in line in
the same place where we wrote the query.
0:05
This is called hard coding, and
0:11
as you probably know,
makes it difficult to reuse.
0:12
If we want to use our
queries more like functions,
0:16
which can be used to accept
a variety of arguments,
0:19
we need to pull those arguments out of
the query declaration, and use variables.
0:22
We briefly touched on using query
variables in our input object lesson, but
0:28
in this video we're gonna go into a little
more detail on how exactly they work.
0:33
We'll be putting together the same query
from our last lesson which calls for
0:38
two movies by D using
the alias movie_1 and movie_2.
0:42
We'll start by defining
a movie details fragment,
0:47
Which will include the id, title,
tagline, and revenue fields.
0:50
We'll start by defining
a movieDetails fragment.
0:56
This fragment will include the id,
1:03
tittle, tagline, and revenue fields.
1:07
Then we,ll go a head and
write the actual query.
1:15
First with movieOne which calls movieById.
1:20
For this one we'll use
a movieId of movie_0.
1:25
For our response we'll go ahead and
include those movieDetails.
1:33
Now let's do the same thing for movieTwo.
1:39
Again, we got the alias
the movieById end pointt.
1:41
The movieId argument, which for
this one wil be movie_1.
1:48
And for our,
response the movieDetails fragment.
1:55
Go ahead and run that query.
2:00
And there you go.
2:04
There's our movieOne and our movieTwo.
2:05
Now, so far,
we're hard coding the movieId arguments.
2:08
To change that, we need to declare
a couple of variables that can be
2:12
used to pass into these endpoints.
2:15
To include query variables, we first need
to declare them at the opening of our
2:18
query inside of parentheses.
2:22
Each variable declaration requires
two things, a variable name and
2:27
a variable type.
2:31
So for movieOne, we'll declare
a variable called movieOneId.
2:33
As you might recall,
2:40
variables are declared with
a dollar sign in front of them.
2:41
For the variable type,
we'll specify a type of ID.
2:45
This is required so follow that
declaration up with an exclamation point.
2:49
Unlike fields, variable declarations
are separated by commas, so go ahead and
2:54
add a comma here for the second variable.
2:59
Then for movieTwo declare
variable called movieTwoId.
3:02
Again this is gonna have a type of
ID with an exclamation point after
3:11
the variable type to
indicate that it's required.
3:16
To use these variables inside
of the query, replace the string
3:20
we're currently passing into
the movieById endpoint for
3:25
movieOne with the variable name,
$movieOneId.
3:29
Now, go ahead and repeat that process for
the second movie,
3:38
this time using $movieTwoId Now
go ahead and run the query.
3:43
Looks like graphic UI has thrown an error.
3:53
So what happened?
3:56
Well, we've declared that variables
will be used in this query, and
3:57
we've specified where they'll be used.
4:02
But we haven't actually
assigned them any values.
4:04
To fix this,
4:07
we'll need to use our query variables
editor located under the query editor.
4:08
This is where we'll define
our variable values.
4:13
This section accepts a simple JSON object
4:17
with variable names as keys followed
by the value you want to set them to.
4:20
So let's a JSON with two entries,
movieOneId and movieTwoId.
4:25
First, we'll start with movieOneId, notice
that we've left off the dollar sign here.
4:30
They aren't used in
the variable's JSON object.
4:37
So for movieOneId,
we'll give it a value of movie_0.
4:40
Now we'll do the same thing for
movieTwoId.
4:45
This time,
we'll give it a value of movie_1.
4:51
Go ahead and run the query again.
4:53
Voila, we've got our two movies!
4:59
Our variables were handed to the query,
which passed them along to the movieById
5:02
endpoint calls, and
now we have a valid response.
5:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up