Developer tools

GraphOS and Apollo Studio

GraphOS is Apollo's all-purpose platform for growing and collaborating on your graph. Apollo Studio is the web interface for GraphOS, which provides helpful views into your graph's usage and performance.

Among others, these GraphOS features are available to all Apollo users for free:

• The Explorer, a powerful GraphQL IDE that connects to all your environments and provides ergonomic ways to author and manage queries.

• A GraphQL schema registry that tracks the evolution of your graph across your environments.

• Key insights into which parts of your schema are being actively used, and by whom.

• Team collaboration via organizations

To learn more about GraphOS, check out the overview.

Apollo Client Devtools

The Apollo Client Devtools are available as an extension for Chrome and Firefox.

Features

The Apollo Client Devtools appear as an "Apollo" tab in your web browser's Inspector panel, alongside default tabs like "Console" and "Network". The devtools currently have four main features:

• GraphiQL: Send queries to your server through your web application's configured Apollo Client instance, or query the Apollo Client cache to see what data is loaded.

• Watched query inspector: View active queries, variables, and cached results, and re-run individual queries.

• Mutation inspector: View active mutations and their variables, and re-run individual mutations.

• Cache inspector: Visualize the Apollo Client cache and search it by field name and/or value.

Installation

You can install the extension via the webstores for Chrome and Firefox.

Configuration

While your app is in dev mode, the Apollo Client Devtools will appear as an "Apollo" tab in your web browser inspector. To enable the devtools in your app in production, pass connectToDevTools: true to the ApolloClient constructor in your app. Pass connectToDevTools: false if want to manually disable this functionality.

Find more information about contributing and debugging on the Apollo Client Devtools GitHub page.

Apollo Client Devtools in VS Code

The Apollo VSCode extension ships with an instance of the Apollo Client Devtools. You can use it to remotely debug your client, which makes it possible to also debug React Native and node applications.

The following sections walk through how to install and integrate with the extension.

• Install the Apollo VS Code extension: start installation | marketplace page

• Set the "Apollographql > Dev Tools: Show Panel" setting to "detect" or "always" in the VS code settings dialog.

• In your code base, install the @apollo/client-devtools-vscode package:

1npm install @apollo/client-devtools-vscode

• After initializing your ApolloClient instance, call connectApolloClientToVSCodeDevTools with your client instance.

1import { connectApolloClientToVSCodeDevTools } from "@apollo/client-devtools-vscode";
2
3const client = new ApolloClient({ /* ... */ });
4
5// we recommend wrapping this statement in a check for e.g. process.env.NODE_ENV === "development"
6const devtoolsRegistration = connectApolloClientToVSCodeDevTools(
7  client,
8  // the default port of the VSCode DevTools is 7095
9  "ws://localhost:7095",
10);

• Open the "Apollo Client DevTools" panel in VS Code.

• Start your application. It should automatically connect to the DevTools.