react-native-apollo-debugger

A lightweight, JS-only network debugger for Apollo Client in React Native and Expo apps – no native modules or native setup.

Quickly see your graphql calls directly on device without relying on external tools or complicated setup.

Add our link to your Apollo Client and include the in‑app overlay (with its floating icon); long‑press the icon to open a full‑screen debugger that captures and inspects all GraphQL operations.

• Capture GraphQL operations (query, mutation, subscription)
• Inspect status, timings, variables/headers, data, and errors
• Toggle capture, set retention, and view details in a sleek in-app overlay

Installation

yarn add react-native-apollo-debugger

or

npm install react-native-apollo-debugger

Works in RN/Expo without additional native steps.

Quick start

1. Add the link to Apollo Client

import {
  ApolloClient,
  ApolloLink,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';
import { createApolloDebuggerLink } from 'react-native-apollo-debugger';

const debuggerLink = createApolloDebuggerLink({
  // Optional (defaults shown)
  captureEnabled: true,
  maxRecords: 200,
  approximateSizeLimitBytes: 200_000,
});

const httpLink = new HttpLink({ uri: 'https://example.com/graphql' });

export const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from([debuggerLink, httpLink]),
});

2. Render the overlay

import React from 'react';
import { View } from 'react-native';
import { ApolloProvider } from '@apollo/client';
import { ApolloNetworkDebugger } from 'react-native-apollo-debugger';

// Assuming apolloClient is created in your own file (with the debugger link included)
import apolloClient from './apolloClient';

export default function App() {
  return (
    <ApolloProvider client={apolloClient}>
      <View style={{ flex: 1 }}>
        {/* Your app content goes here */}
        <ApolloNetworkDebugger iconInitialPosition="top-left" />
      </View>
    </ApolloProvider>
  );
}

3. Use it on device (or simulator)

• Drag the floating Apollo icon anywhere on screen.
• Long‑press the icon to open the full‑screen debugger overlay.
• In the overlay:
  • View each operation’s name, type, status, duration, and time
  • Tap an item to see details: variables, headers, data, GraphQL/network errors
  • In development, use “Send to console” to pretty‑print JSON into logs
  • Press Clear to reset captured records
• Press Close to dismiss.

Environment behavior (dev-only by design)

• The default entry is dev‑only:
  • In development (__DEV__), createApolloDebuggerLink and ApolloNetworkDebugger work normally.
  • In production, the default entry is a no‑op: the link transparently forwards requests and the overlay renders nothing. This keeps production behavior safe by default without extra wiring.

Keep it out of the production bundle (no bytes in prod)

Even though this package is lightweight, you may still prefer to exclude it entirely from production bundles. Only import the debugger in dev code paths. Because Metro includes only what’s imported, guarding the require with __DEV__ keeps it out of the production bundle.

Link setup (only in dev):

import {
  ApolloClient,
  InMemoryCache,
  ApolloLink,
  HttpLink,
} from '@apollo/client';

const httpLink = new HttpLink({ uri: 'https://example.com/graphql' });
const links: ApolloLink[] = [httpLink];

if (__DEV__) {
  const { createApolloDebuggerLink } = require('react-native-apollo-debugger');
  links.unshift(createApolloDebuggerLink());
}

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: ApolloLink.from(links),
});
export default client;

Overlay (only in dev):

let Debugger: React.ComponentType | null = null;
if (__DEV__) {
  Debugger = require('react-native-apollo-debugger').ApolloNetworkDebugger;
}

export default function App() {
  return (
    <ApolloProvider client={client}>
      <View style={{ flex: 1 }}>
        {/* Your app content */}
        {Debugger ? <Debugger iconInitialPosition="top-left" /> : null}
      </View>
    </ApolloProvider>
  );
}

API

createApolloDebuggerLink(options?)

Creates the Apollo Link that captures operations.

type DebuggerOptions = {
  /** Enables/disables capture without removing the link (default: true) */
  captureEnabled?: boolean;
  /** Max number of records to retain (default: 200) */
  maxRecords?: number;
  /** Max JSON bytes per stored payload before truncation (default: 200_000) */
  approximateSizeLimitBytes?: number;
};

License

MIT

---

Made with create-react-native-library