6. Query building in Apollo Studio
5m

🚀 Exploring the Explorer

Let's build our query using the Apollo Studio Explorer. First we need to start our server. Open a terminal window, navigate to the server folder with cd server, then run npm start.

With the server running, we can go to the Explorer in the browser by going to studio.apollographql.com.

Let's head over to the schema page (the first tab on the left sidebar).

Screenshot of Apollo Studio Explorer in the Schema page

This page gives us useful information about the current status of our schema. In production, this would list the changes each time the schema is deployed. In our case, because we're using a development graph, Studio automatically polls our locally running server for schema changes.

Each new schema version is shown with its own hash, kind of like a commit for a Git repository. This page has 3 main tabs: Reference, Changelog and SDL. Let's check out the changelog.

Here we'll see every update made to our schema, presented in a "diff"-like format that may feel familiar: green pluses for additions, red minuses for deletions, and yellow circles for modifications from previous versions.

In our last schema version in Lift-off II, we only had the tracksforHome query, a Track type, and an Author type. Now we can see the latest changes: a new query for a track, new fields added for the Track type, and a whole new Module type.

Pretty handy to get a quick understanding of the schema evolution over time!

Screenshot of Apollo Studio Explorer in the Schema Changelog tab

The items displayed in the Changelog are interactive. For example, we can click on the track query we've just added and it will send us to the Reference tab on the same page, where we get a breakdown of the entry points, objects, scalars, and more.

Here we see our track query highlighted and we see its description, the same one we added in the schema file.

Notice the Play button on the right of the query? Clicking it sends us directly to the Explorer with the sidebar opened to the field!

🛠️ Building our query

Clicking the ⊕ button on the track field, we start to see our query come together in the Operations section.

Screenshot of Apollo Studio Explorer with Operations panel pre-filled

First let's rename our query to better explain what it's for, so we'll replace Query with getTrack.

In the Operations section of the Explorer:

query getTrack($trackId: ID!) {
track(id: $trackId) {
}
}

You'll notice something new here: a dollar sign ($) followed by the name trackId.

💰 Variables

The $ symbol indicates a variable in GraphQL. The name after the $ symbol is the name of our variable, which we can use throughout the query. After the colon is the variable's type, which must match the type of the argument we'll use it for.

Illustration to explain the syntax of GraphQL variables

Variables are great—they let us pass argument values dynamically from the client-side so we don't have to hardcode values into our query. We'll use them every time we create a query with arguments.

Loading...

In our case, we have a variable called trackId that the Explorer set up for us down in the Variables section. Right now, it's set to null, but let's replace it with the track ID we've been testing so far: c_0.

Screenshot showing the Variables panel in the Explorer

In the Variables section in the Explorer:

{"trackId": "c_0"}

Before we start adding all the fields we need from our initial mockup, let's start small with just returning the id and the title.

In the Operations section of the Explorer:

query getTrack($trackId: ID!) {
track(id: $trackId) {
id
title
}
}

When we click on the run query button, we see the data we're expecting! Awesome, we can keep on adding the fields to complete the full set of data we need for our mockup by clicking the ⊕ sign beside each field on the sidebar.

Your query should look like this:

query getTrack($trackId: ID!) {
track(id: $trackId) {
id
title
author {
id
name
photo
}
thumbnail
length
modulesCount
numberOfViews
modules {
id
title
length
}
description
}
}

Let's click on the Run Query button again… it looks like we get the complete track, but it's a bit tricky to read as a JSON object. The Explorer has a nice option to format the response as a table.

And now we can clearly see the track that we need, along with all the details for each module! Nice!

Screenshot showing the Explorer with completed query and successful response

Code Challenge!

Build a query called getMission. This query uses a variable called isScheduled of type nullable Boolean. It retrieves a mission using the scheduled argument set to the isScheduled variable. It retrieves the mission's id and codename.

Our server is ready for our client's queries, so let's hop on over to client-land and work on the UI.

Previous
Next