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
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