🚀 Exploring our first query
Time to put our server to the test and see if we can query for the track data we need for our homepage grid feature.
To write our test query, we'll use the Apollo Studio Explorer. The Explorer is free to use, and it provides awesome development features like interactive query building, query history, and response hints. This will make building our queries fast and fun.
You can cmd+click
on the URL in your terminal to open it your browser, or you can open it right here: studio.apollographql.com/dev
If you're already logged in to Apollo Studio, this link takes you directly to the Explorer. Because this is our first time, we need to create a free Apollo account first. Creating an account is fast, and the benefits of using the Explorer are well worth it!
Apollo accounts, the Explorer, and many other Apollo Studio features are free forever. Studio provides additional features for organizations on a paid plan.
Here's the page we land on the first time:

Feel free to sign up with your GitHub account or with your email address, whichever you prefer.
If you sign up with your GitHub account, Apollo requests access only to your GitHub account's associated email address.
You'll be redirected to finalize account creation. Everything should be pre-filled to make the process seamless, but feel free to make edits. Then click Create account.

The final step is to confirm the pre-filled details to connect Studio to your development server:

For this lesson, select the following settings:
- Graph type: Development
- Endpoint:
http://localhost:4000
Click Create Graph to create a new development graph that's connected to your local server. A development graph is only accessible to you, and it stays updated with any changes you make to your server's schema.
Exploring the Explorer
All right! Our schema is properly loaded and the dev graph is connected to our local server on port 4000
. We now arrive in the Apollo Studio Explorer:

The Operations panel in the middle is where we create queries. The Explorer has already filled in a default operation that uses our tracksForHome
query! You can edit the operation directly or add fields from the Documentation tab (more on this below).
Above the Operations panel is the button to run our query. Let's click it now and see what happens:

After a brief delay, the Response panel on the right displays our list of track IDs. Sweet!
Building a query
The Explorer's Documentation tab enables you to drill down into your schema's fields, starting at the entry points of the Query
type. When you click on a field, you can see the description we added, along with the field's subfields:

When you click on the ⊕ button next to a field, the field is automatically added to the query in the Operations panel. This is a handy way to assemble complex queries without needing to remember your schema's exact structure.
Let's add the title
field to our query and run it again. You'll see the updated response in the Response panel.
Now also add the thumbnail
, length
, and modulesCount
fields.
For the author
field, we need to add subfields of the Author
type as well. Click into the author
field and then click the ⊕ button for id
, name
, and photo
.
While we're here, let's rename our operation from Query
to getTracks
so it's more obvious what it's for. Your completed operation should match the following:
query getTracks {tracksForHome {idtitlethumbnaillengthmodulesCountauthor {idnamephoto}}}
Task!
Notice that the query's response looks exactly like the data we need to populate the grid on our homepage: nothing extra and nothing missing, all in a single call. A REST API would probably have required us to make multiple calls to fetch each author by their ID.
Code Challenge!
tracksForHome
array and paste it below (not including the trailing comma)The Explorer can do so much more, but this is all we'll cover for now. With our query defined, it's time to take care of building out our front-end app.
Which of these are benefits of using the Apollo Studio Explorer?