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 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 variables
  • 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 operations individually. As you work, the editor shifts focus to whichever operation you click into. Each operation 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 subfields, the Explorer keeps track of your current path within the schema.

You can click the ⊕ button next to any in the Documentation tab to add that field to the editor, at your current path. By default, the automatically generates s for that field'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 field if that field'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