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

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.

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:

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.

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.