Docs
Launch GraphOS Studio

The GraphOS Studio Explorer

Overview

The Studio is a powerful web IDE for creating, running, and managing GraphQL s:

The is free for all organizations. It supports all GraphQL types (Query, Mutation, and Subscription).

The is also available in a sandbox mode that doesn't require an Apollo account.

Setup

To get started with the , create a graph in Apollo Studio and then navigate to that graph's page:

The default Explorer view for a new supergraph

Building a query

Here's an example embedded Explorer you can use to try out the query-building features described below!

The operation editor

The ’s editor is built on Monaco. It provides common features of query-building tools, including:

  • Panels for specifying headers, s, and environment s
  • Persistence across sessions
  • Keyboard shortcuts (click the keyboard icon in the bottom-right corner of the editor to view all available shortcuts)

The editor also provides full IntelliSense support for GraphQL, including:

  • Query linting
  • Autocomplete
  • Peek definitions on mouse hover
  • Jump-to-definition with command-click

The editor can manage multiple s and reason about those s individually. As you work, the editor shifts focus to whichever you click into. Each has its own context menu (•••) that enables you to format it, copy a link to share, or generate a curl command.

The Documentation tab

The 's Documentation tab enables you to step into your , beginning at one of its entry points. As you step into a and its subs, the keeps track of your current path within the .

You can click the ⊕ button next to any in the Documentation tab to add that to the editor, at your current path. By default, the automatically generates s for that 's s.

Searching your schema

The provides a two-step search (shortcut ⌘+K):

  1. Find the you're looking for
  2. Find the ideal path to that from your 's entry points

1. Find a field

First, you search for a by its name (e.g., email). The interface helps you differentiate between s with the same name (e.g., User.email versus Organization.email). The search is "fuzzy", so it works even if you don't know a 's exact spelling.

If you know exactly which type and which you're looking for, you can separate those values with a period (e.g., User.email).

2. Find a path to the field

After you identify a type- pair, the lists all of the paths to that that start at your 's entry points (Query, Mutation and Subscription). These paths are ordered by depth.

Finding the path to a is particularly important with GraphQL, because you can only query a if that 's position within your query is valid.

After you select which path you want, the opens that path in its Documentation tab. You can then click the ⊕ button to add that path to your query.

Additional features

The also provides:

Next
Sandbox (no account required)
Edit on GitHubEditForumsDiscord