Rozenite GraphQL Client DevTool

A powerful debugging plugin for GraphQL clients in React Native applications, built for the Rozenite developer tools platform.

📺 Demo

Coming Soon! A comprehensive video demonstration will be added here showcasing all features and capabilities of the GraphQL Client DevTool in action.

🌟 Overview

The Rozenite GraphQL Client DevTool provides a comprehensive debugging interface for monitoring and inspecting GraphQL operations in React Native applications. It supports multiple GraphQL clients through a flexible adapter pattern and offers real-time operation tracking, cache inspection, and schema exploration.

Key Features

• 🔍 Real-time Operation Tracking - Monitor all GraphQL queries, mutations, and subscriptions as they happen
• 📊 Cache Inspector - Browse and explore your GraphQL client's cache entries
• 🗺️ Schema Explorer - Navigate through your GraphQL schema with detailed type information
• 🔌 Multi-Client Support - Built-in adapters for Apollo Client, with support for custom adapters
• 🎯 Filtering & Search - Powerful filtering and search capabilities across all tabs
• 📝 Detailed Inspection - View query text, variables, response data, errors, and timing information

Supported GraphQL Client

• ⚡ Apollo

Coming Soon

• ⚡ URQL
• ⚡ Relay

📦 Installation

# Using npm
npm install rozenite-graphql-client-devtool

# Using yarn
yarn add rozenite-graphql-client-devtool

# Using pnpm
pnpm add rozenite-graphql-client-devtool

For Apollo Client support:

npm install @apollo/client graphql

🚀 Quick Start

Apollo Client Setup

For complete operation tracking (including mutation responses and subscriptions), you need to add the Link to your Apollo Client configuration:

import { ApolloClient, InMemoryCache, ApolloLink, HttpLink, ApolloProvider } from '@apollo/client';
import { apolloGraphqlDevtoolLink, useGraphqlClientDevtool } from 'rozenite-graphql-client-devtool';

// 1. Create the DevToolLink Link
const devToolLink = apolloGraphqlDevtoolLink();

// 2. Create your HTTP Link
const httpLink = new HttpLink({
  uri: 'https://api.example.com/graphql',
});

// 3. Combine links - Rozenite Link MUST be first
const client = new ApolloClient({
  link: ApolloLink.from([
    devToolLink,  // ⚠️ IMPORTANT: Must be first to capture all operations
    httpLink,
  ]),
  cache: new InMemoryCache(),
});

function App() {
  // 4. Initialize the devtool
  useGraphqlClientDevtool({
    client,
    clientType: 'apollo',
  });

  return (
    <ApolloProvider client={client}>
      {/* Your app components */}
    </ApolloProvider>
  );
}

🔧 Configuration

API Reference

useGraphqlClientDevtool(config)

The main hook for integrating your GraphQL client with Rozenite DevTools.

Parameters

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | client | any | required | Your GraphQL client instance (Apollo Client or custom) | | clientType | 'apollo' \| 'custom' | required | The type of GraphQL client | | adapter | GraphQLClientAdapter | undefined | Custom adapter implementation (required if clientType is 'custom') | | includeVariables | boolean | true | Whether to include variables in operation tracking | | includeResponseData | boolean | true | Whether to include response data in operation tracking |

Example with Options

useGraphqlClientDevtool({
  client: apolloClient,
  clientType: 'apollo',
  includeVariables: true,
  includeResponseData: true,
});

🎯 Features in Detail

1. Operations Tab

Monitor all GraphQL operations in real-time with comprehensive details.

Features:

• Real-time operation tracking with status indicators (pending, loading, success, error)
• Filter operations by type (Query, Mutation, Subscription)
• Search operations by name
• Sort by timestamp (newest first)
• Detailed operation view including:
  • GraphQL query/mutation text with syntax highlighting
  • Variables used in the operation
  • Response data in an interactive JSON tree view
  • Error details with location and path information
  • Timing information (duration)
• Color-coded operation types and status badges
• Clear all operations button

2. Cache Tab

Inspect and explore your GraphQL client's cache entries.

Features:

• View all cache entries with their keys and data
• Group entries by typename for better organization
• Search and filter by key or typename
• Detailed cache entry viewer with interactive JSON tree
• Refresh button to request latest cache snapshot
• Entry metadata (timestamp, key, typename)
• Empty state when cache is empty

3. Explorer Tab

Browse your GraphQL schema and available operations.

Features:

• Display all available queries, mutations, and subscriptions
• Search through operations by name
• Filter by category (All, Queries, Mutations, Subscriptions)
• View detailed operation information:
  • Arguments with types, descriptions, and default values
  • Return types with nested field information
  • Field descriptions from schema
  • Deprecation warnings
• Expandable/collapsible operation details
• Color-coded by operation type
• Type system exploration

🔌 Custom Adapters (Work in Progress)

If you're using a GraphQL client that isn't Apollo, you can create a custom adapter.

Creating a Custom Adapter

import { GraphQLClientAdapter, GraphQLOperation } from 'rozenite-graphql-client-devtool';

class MyCustomAdapter implements GraphQLClientAdapter {
  constructor(private client: MyGraphQLClient) {}

  // Subscribe to operations
  subscribeToOperations(callback: (operation: GraphQLOperation) => void): () => void {
    // Implement your subscription logic here
    const unsubscribe = this.client.on('operation', (op) => {
      callback({
        id: generateId(),
        operationName: op.name,
        operationType: op.type,
        query: op.query,
        variables: op.variables,
        status: 'loading',
        timestamp: Date.now(),
        // ... other required fields
      });
    });

    return unsubscribe;
  }

  // Subscribe to cache changes
  subscribeToCacheChanges(callback: (cacheSnapshot: any) => void): () => void {
    // Implement cache subscription logic
    return () => {}; // Return cleanup function
  }

  // Get current cache snapshot
  async getCacheSnapshot(): Promise<any> {
    return this.client.extract();
  }

  // Get schema information
  async getSchema(): Promise<any> {
    return this.client.getSchema();
  }
}

// Usage
useGraphqlClientDevtool({
  client: myCustomClient,
  clientType: 'custom',
  adapter: new MyCustomAdapter(myCustomClient),
});

Adapter Interface

interface GraphQLClientAdapter {
  /**
   * Subscribe to GraphQL operations
   * @param callback - Called when an operation is executed or updated
   * @returns Cleanup function to unsubscribe
   */
  subscribeToOperations(
    callback: (operation: GraphQLOperation) => void
  ): () => void;

  /**
   * Subscribe to cache changes
   * @param callback - Called when cache is updated
   * @returns Cleanup function to unsubscribe
   */
  subscribeToCacheChanges(
    callback: (cacheSnapshot: any) => void
  ): () => void;

  /**
   * Get current cache snapshot
   * @returns Promise resolving to cache data
   */
  getCacheSnapshot(): Promise<any>;

  /**
   * Get GraphQL schema
   * @returns Promise resolving to schema introspection result
   */
  getSchema(): Promise<any>;

  /**
   * Optional: Clear the cache
   */
  clearCache?(): Promise<void>;
}

📚 TypeScript Support

This package is written in TypeScript and includes complete type definitions.

import type {
  GraphQLOperation,
  GraphQLClientAdapter,
  OperationType,
  OperationStatus,
} from 'rozenite-graphql-client-devtool';

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT

📞 Support

For issues, questions, or feature requests, please file an issue.

🔮 Roadmap

• [ ] URQL client support
• [ ] Relay Modern support

Made with ❤️ for React Native developers