Executing Your First Query3: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)
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