Apollo Inspector — DevDelta

# Apollo Inspector

Apollo Inspector is a Chrome extension designed to facilitate debugging of GraphQL operations within the open-source GraphQL client, Apollo Client.

## Purpose

The tool is indispensable for diagnosing a multitude of issues that may arise during GraphQL operations within Apollo Client. It provides insights into various aspects of operations, aiding in efficient debugging and optimization efforts.

## What kind of issues can be debugged using the tool

1. Identification of unwanted operations triggered during the render phase.
2. Diagnosis of reasons behind multiple re-renders of the same watch query.
3. Resolution of issues stemming from conflicting queries.
4. Presentation of field names in case of missing field errors.
5. Detailed time information to assess query execution patterns, including adherence to the Waterfall model.
6. Detection of delays in data being written to the cache.
7. Insight into the causes of operation failures.

## Key Features

1. Comprehensive Tracking: Tracks all types of operations including Query, Mutation, Subscription, and more.
2. Detailed Information: Provides essential details for each operation, such as name, type, execution status, fetch policy, execution time, queuing time, and result size.
3. Filtering Options: Filters available for efficient operation list management based on type, results source, and status.
4. Affected Queries View: Clear visualization of operations responsible for re-rendering queries.
5. JSON Data Copy: Ability to copy operation data in JSON format.

## Usage Instructions

To enable the Apollo Inspector extension:

1. Single Apollo Client Instance: If your web app has a single instance of Apollo Client, attach it to the `__APOLLO_CLIENT__` variable on the window object.

2. Multiple Apollo Client Instances: If your web app has multiple instances of Apollo Client, create an array (ClientObject[]) containing all instances and attach it to the `__APOLLO_CLIENTS__` variable on the window object.

For comprehensive guidance on how to use the extension, refer to the [official documentation](https://github.com/jpsahoo14/apollo-inspector-ui/blob/main/extension/readme.md).