Queries and the Explorer

4. Queries and the Explorer

Overview

Now for the fun part: actually using our supergraph!

In this lesson, we will:

Run queries in Apollo Explorer
Create and use operation collections

Building and running queries

We can easily build, run, and manage GraphQL queries and mutations with the help of the Apollo Explorer. It's part of the GraphOS platform!

The Explorer IDE is easily accessible through the sidebar navigation.

https://studio.apollographql.com

The Explorer on Apollo Studio

Note: You can also get to the same page immediately after creating your supergraph by clicking on Query your supergraph in the modal.

If you've used Apollo Server to build your GraphQL API before, the Explorer will look very familiar. It's always available for local development and querying!

Let's run our first query.

Getting to know the Explorer

The Operation panel in the middle is where we create queries. The Explorer has already filled in a default operation! You can edit the operation directly or add fields from the Documentation sidebar.

At the top of the Operation panel is the button to run our query. Let's click it now and see what happens!

https://studio.apollographql.com

The response shows data after clicking on the Run button

The Response panel on the right displays our list of recipe IDs. Sweet, our supergraph is up and running!

Operation collections

Operation collections help you store and organize commonly used operations so you can access them more quickly and share them with team members.

There are two types of collections: personal and shared.

Personal collections are visible only to you. Shared collections are visible to all organization members who can view the supergraph the collection belongs to.

Creating a shared operation collection

Let's get our shared collection started, this is going to be helpful for future teammates (and future us!) to get the most out of the supergraph.

Click on the bookmark icon to access the Operation Collections in the left panel.

https://studio.apollographql.com

Accessing the Operation Collections tab in the left panel

Under the Shared section, click the + Create collection button.

We'll give the collection a name and a description.

Name: Recipes
Description: A collection of queries to retrieve content about recipes

https://studio.apollographql.com

Creating a collection, filling in the name and description in the modal

Then click Add. We'll see the new collection show up under the Shared section.

Saving an operation to a collection

Let's add an operation to the collection!

We'll build a query to retrieve a random recipe from the API. You can try building this yourself, or copy the snippet below and paste it into the Operations section.

query GetRandomRecipe {
  randomRecipe {
    id
    name
    cookingTime
    prepTime
    servings
    instructions
    readyTime
    ingredients {
      text
    }
  }
}

When you run it, you should get data about a random recipe!

Click the Save icon.

https://studio.apollographql.com

Click the Save icon in the Operation panel

We'll use the same operation name we already gave it. Then, select the collection it belongs to (the one we just created earlier!).

https://studio.apollographql.com

Filling in the operation details in the operation collection modal

We'll hit Save, and success!

We can see the operation name under this shared collection, and we can see a bookmark icon in the tab that also tells us that this operation is saved. It's ready to use whenever we need it!

Practice

Which of these are benefits of using the Explorer?

It automatically generates documentation of a schema's types and fields.You can store frequently used operations in an operation collection.You can use it to build and run queries.You can host your subgraph on it.

Key takeaways

Operation collections help you store and organize commonly used operations so you can access them more quickly and share them with team members.
You can save collections that are visible only for yourself (personal) or visible to the whole organization (shared).

Up next

We can send queries to our supergraph! 🥳 This is great, but we want other people to use it too. This is a public API, after all! In the next lesson, we'll learn a couple ways to enable the best API experience for our users.

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.