Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to GraphQL

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Executing Your First Query

3:01 with Isaac Lee Morris

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 up

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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up