How to Use Apollo DevTools for GraphQL Debugging

To use Apollo DevTools, install the browser extension for Chrome or Firefox, then open your app using Apollo Client. The DevTools let you inspect queries, mutations, cache, and errors in real time. Simply open the DevTools panel in your browser to start debugging your GraphQL operations.

Syntax

Apollo DevTools is a browser extension that connects to your app using Apollo Client. It does not require code changes but works by detecting Apollo Client in your app.

Once installed, open your browser's developer tools and find the Apollo tab. Here you can:

• View active GraphQL queries and mutations
• Inspect the Apollo Client cache
• See errors and loading states
• Refetch or modify queries

graphql

No code needed to use Apollo DevTools; just install and open the browser extension.

Example

This example shows how Apollo DevTools works with a simple React app using Apollo Client to fetch data from a GraphQL server.

After running the app, open the browser DevTools and select the Apollo tab to see queries and cache.

javascript

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/',
  cache: new InMemoryCache()
});

const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      code
      name
      emoji
    }
  }
`;

function Countries() {
  const { loading, error, data } = useQuery(GET_COUNTRIES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data.countries.slice(0, 5).map(({ code, name, emoji }) => (
        <li key={code}>{emoji} {name}</li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <h2>My Countries List</h2>
      <Countries />
    </ApolloProvider>
  );
}

Output

<ul><li>🇦🇫 Afghanistan</li><li>🇦🇱 Albania</li><li>🇩🇿 Algeria</li><li>🇦🇸 American Samoa</li><li>🇦🇩 Andorra</li></ul>

Common Pitfalls

Common mistakes when using Apollo DevTools include:

• Not using Apollo Client in your app, so DevTools cannot detect queries.
• Running the app in production mode with minimized code, making debugging harder.
• Forgetting to open the DevTools panel or the Apollo tab.
• Using older Apollo Client versions that may not be fully supported.

Make sure your app uses Apollo Client and you open the DevTools panel to see the Apollo tab.

javascript

/* Wrong: No Apollo Client used, so DevTools won't detect queries */
// Just fetch with fetch() or other libraries

/* Right: Use Apollo Client to enable DevTools detection */
const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache()
});

Quick Reference

Action	Description
Install Extension	Add Apollo DevTools from Chrome or Firefox store
Open DevTools	Press F12 or right-click > Inspect in browser
Select Apollo Tab	View queries, mutations, cache, and errors
Inspect Cache	See current Apollo Client cache state
Refetch Queries	Manually refetch queries to update data
View Errors	Check GraphQL errors and loading states

Key Takeaways

Install Apollo DevTools browser extension to start using it.

Open your browser DevTools and select the Apollo tab to inspect GraphQL operations.

Apollo DevTools works only if your app uses Apollo Client.

Use the DevTools to view queries, mutations, cache, and errors in real time.

Avoid running minimized production builds when debugging with Apollo DevTools.