Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Ready for the fun part? In this video we’ll run our first GraphQL query!
GraphQL Course GitHub Repo: Use this repo to follow-along with this 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
Now that you've been properly
introduced to our playground,
0:00
you're ready to get started.
0:03
In this video, you'll learn how to run
your first GraphQL query and launch pad.
0:05
For each of these videos, there will be a
corresponding link in the teacher's notes
0:11
to the launch pad starting point.
0:16
For example, the starting point for
this video is listed under stage one,
0:18
video five.
0:23
Go ahead and open that link.
0:24
As I mentioned in the last video, you'll
see some code in the backend editor pane.
0:26
But you can ignore that for now.
0:31
Just know that it's there to generate
the responses you'll get from the server.
0:33
The backend we'll be working
with is an example movies API.
0:38
It returns movie objects just like
the one's we saw in our GraphQL versus
0:42
Rest video.
0:47
The schema we'll be working with can
be viewed in the backend editor pane,
0:48
inside of the typeDefs variable.
0:53
Here we can see that the movie
object has the following fields,
0:57
ID, title, tag line, revenue, and studio.
1:02
For your first query, go ahead and
click into the query editor tab.
1:07
Start by typing in your query declaration,
1:12
remember queries are wrapped with
curly braces just like Json objects.
1:15
So go ahead and add some opening and
closing curly braces.
1:20
We'll be hitting the allMovies endpoint,
so
1:24
that's the name we'll input at
the root level of our query.
1:26
Now, to specify the format,
we want our movies to be returned in,
1:31
we'll add another pair of
curly braces after, allMovies.
1:35
For this query, we're just interested
in the ID, title, and tagline fields.
1:41
As you might expect, we'll specify those
by name, ID, title, and tagline, right
1:49
off the bat you might notice a couple of
differences between GraphQL and JSon.
1:55
First, we're only specifying
the property names without the colon and
2:00
values that usually
accompany them in JSon.
2:05
If you think about it, this actually makes
sense since we're requesting data and
2:09
we don't know what those
values will be yet.
2:13
The next thing you probably
notice is that there's no commas.
2:16
If you prefer the appearance of commas,
2:19
you can add them,
it won't break your query.
2:21
Just know that they're neither
necessary nor standard in GraphQL.
2:24
Now go ahead and
click the play button in the tool bar.
2:28
There you go.
2:35
We can see a list of all the movies
stored behind our movies endpoint
2:36
with the fields we specified in our query.
2:39
That's it, you've just learned
your first bit of GraphiQL.
2:42
Feel free to play around
with this basic query and
2:47
see if you can get different results.
2:49
In our next section, I'll teach you
how queries work in more detail.
2:52
But first up, we've got a quiz on the
basic GraphQL concepts you just learned.
2:56
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