3. Apollo Explorer
5m

Overview

It's helpful to understand from the schema's perspective, but we want to actually write queries to bring data to our frontend. Fortunately, we have a tool that allows us to explore the process of doing just that: the Explorer!

In this lesson, we will:

  • Explore our API hands-on in the Explorer
  • Build and run queries for track data

Introducing the Explorer

To write our test queries, we'll use Apollo Explorer. The Explorer is free to use, and it provides awesome development features like interactive building, query history, and response hints. This will make building our queries fast and fun.

Since we're still in the local development stage of building our , we'll start by opening the Explorer in .

Let's jump back into Sandbox by opening a new browser to https://studio.apollographql.com/sandbox/explorer. You can also access the Explorer from the Schema page by clicking the Explorer option from the menu on the left.

http://studio.apollographql.com/sandbox/schema/reference

Accessing the Explorer from the Schema page: the Explorer menu option is outlined

Exploring the Explorer

Sandbox should already be connected to our API from the last step. If you need to reconnect, paste the following endpoint into the input at the top of the screen.

The endpoint to our GraphQL API
https://odyssey-lift-off-server.herokuapp.com/
http://studio.apollographql.com/sandbox/explorer

A screenshot of the Explorer interface in Apollo Sandbox, connected to the API with some new data displaying.

The Explorer consists of three primary sections: Documentation, Operation, and Response.

The Operation panel in the middle is where we create queries. You might already see it populated with an ; if so, we can start fresh and open up a new tab by clicking the plus button just above.

http://studio.apollographql.com/sandbox/explorer

A screenshot of the Explorer interface in Apollo Sandbox, highlighting the plus button above the Operation panel.

Building a query

The Explorer's Documentation tab enables you to drill down into your schema's , starting at the entry points of the Query type.

http://studio.apollographql.com/sandbox/explorer

A screenshot of the Explorer interface. The Documentation panel shows a list of possible fields to include in the query.

Let's click the plus button next to the tracksForHome to add it to our .

http://studio.apollographql.com/sandbox/explorer

The Operation panel updated to include the tracksForHome field.

The tracksForHome returns a list of Track items, and we'll see that the Documentation panel automatically updated to show the we can for each Track.

When you click on a , you can see the description we added, along with the field's subfields (if it has any).

http://studio.apollographql.com/sandbox/explorer

The Documentation panel displaying greater detail about a Track's title field.

Clicking on the plus () button next to a automatically adds that field to the in the Operation panel. This is a handy way to assemble complex queries without needing to remember your schema's exact structure.

http://studio.apollographql.com/sandbox/explorer

The Operation panel updated to add the title for each track object.

Let's add the title to our , and run it by clicking the blue play button at the top of the panel. After a few moments, the Response panel will update... and the titles for each of our Tracks have arrived!

http://studio.apollographql.com/sandbox/explorer

The Response panel after the query has run, showing the titles for each track.

Adding all fields

Right now, we've selected just the title , but the Explorer also has a way to add all fields to an at once. When we click the dropdown by the Fields subheading, we'll see that we have two options.

http://studio.apollographql.com/sandbox/explorer

Opening the Fields dropdown to see options to add all fields to a query in Apollo Explorer.

First, we have the option to Select all scalar fields. This will select all of the on the tracksForHome type that return a value that does not have additional sub.

Click Select all scalar fields. We'll see a number of new have been added to our .

http://studio.apollographql.com/sandbox/explorer

The Explorer, showing the new scalar fields that were added to our query.

All of our are taken care of, but we'll notice that neither the author nor the modules was added. This is because these fields do not return a type - they return an with additional subfields! Fortunately, there's another option in Explorer that will add all fields at once, whether they return a scalar or object type. Let's click the dropdown by the Fields subheading again.

The second option in this dropdown is to Select all fields recursively. This means that in addition to adding all to our , we can include fields that return an , along with all of the object type's subfields! Let's see what this looks like in practice.

http://studio.apollographql.com/sandbox/explorer

The Fields dropdown, showing the option to select all fields recursively.

When we click Select all fields recursively, the updates.

http://studio.apollographql.com/sandbox/explorer

The Explorer, showing that all fields have been added recursively to our query.

We can see that the author and modules have been included in the , along with each of their subfields. By adding all fields recursively, we're able to include all the subfields of the Author and Module types without having to select them one-by-one.

Running the query

While we're here, let's rename our from ExampleQuery to GetTracks so it's more obvious what it's for. Your completed should match the following:

query GetTracks {
tracksForHome {
title
id
thumbnail
length
modulesCount
description
numberOfViews
author {
id
name
photo
}
modules {
id
title
length
content
videoUrl
}
}
}

Now let's run it! And just look at that beautiful data.

Task!
http://studio.apollographql.com/sandbox/explorer

The Response panel in the Explorer showing all of our queried data.

That's a ton of data we've just returned: we have details for all of our tracks, authors, and modules, all in a single !

Saving an operation

We can see from running that just how powerful is for fetching clean, precise data.

But when we return to our app mock-up, we'll find that we might have overfetched data for this homepage just a little bit.

A mockup of the app, showing a grid of learning track cards

In the last lesson, we defined the that we needed to satisfy this frontend view.

  • Title
  • Thumbnail image
  • Length (estimated duration)
  • Module count
  • Author name
  • Author picture

From looking at this list, it's clear that some of the data we've returned in our complete —the specific modules details, for instance—is unnecessary.

No problem! Let's open a new Operation tab in the Explorer (click the plus button) and build a that gets us just the details we need for the mock-up shown above.

Try it out yourself! Then check your answer below.

query GetTracks {
tracksForHome {
id
title
thumbnail
length
modulesCount
author {
name
photo
}
}
}

Ah, much better. Because we can construct our queries -by-field, we have more precise control over the shape of the data we'll get back from our API.

http://studio.apollographql.com/sandbox/explorer

The final query for our home page data, constructed in the Explorer.

Saving an operation

We'll be using this GetTracks in a future lesson, so let's take advantage of another Explorer feature that makes this easier.

At the top of the Operation panel, we'll find a save icon button.

http://studio.apollographql.com/sandbox/explorer

A screenshot highlighting the save button at the top of the Operation panel in Explorer, opened to the 'Save as' option.

Clicking the Save as option from the dropdown opens a modal where we can give our a name, and save it to an operation collection.

With a collection, we can store a group of in a place that's quick to access when we want to test future changes to our schema.

Let's start by giving our the name TracksForHome so that we can locate it when we need it again. Next, in the Select a collection dropdown, let's select the option under Sandbox to create a new default collection.

http://studio.apollographql.com/sandbox/explorer

The Save Operation modal, with fields to name an operation and store it in a new default Sandbox collection.

After we click the Save button, we'll see that our 's tab now has the name we assigned to it! Additionally, we'll see a bookmark icon that indicates that this operation is saved to a collection.

http://studio.apollographql.com/sandbox/explorer

Explorer showing the named Operation tab and bookmark icon.

We can use the panel on the left of the Explorer to access that we've saved to a collection. Clicking the bookmark icon at the top of the menu opens up all of our Operation Collections, where we can see our TracksForHome has been saved for quick access!

http://studio.apollographql.com/sandbox/explorer

Opening the Operation Collections panel to access a saved operation.

The Explorer can do so much more, but this is all we'll cover for now. With our defined, it's time to take care of building out our frontend app.

Practice

Which of these are benefits of using the GraphOS Studio Explorer?

Key takeaways

  • The Explorer gives us an environment to build queries and execute them against a provided API.
  • We can use the Documentation panel of the Explorer to drill into the types and in our , and build comprehensive, precise queries.
  • can be saved in an Operation Collection for later use.

Up next

We connected to our API and ran our very first queries. Awesome job! Now it's time to take them out of the sandbox, and bring them into our app. Coming up next, we'll talk about the journey of a GraphQL from client to server and back—and get to know the tool that will bring our data to life!

Previous

Share your questions and comments about this lesson

This course is currently in

beta
. Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.