@urql/devtools

@urql/devtools is the first-party exchange that connects a urql GraphQL client to the urql Devtools browser extension. Added to a client’s exchange pipeline, it streams every GraphQL operation, response, error, and cache event to the devtools panel so developers can watch their data layer in real time.

It is a development-only diagnostic tool: it surfaces the internal activity of urql - which queries fired, what the server returned, and how the normalized cache changed - without requiring any changes to component code.

What You Get

• A devtoolsExchange to drop into your urql client’s exchange array
• Real-time streaming of GraphQL operations, responses, and errors to the extension
• Visibility into cache activity and operation lifecycle events
• Zero component-level changes - instrumentation lives entirely in the client setup

Common Use Cases

• Debugging why a urql query returns stale, missing, or unexpected data
• Watching operations and cache updates flow through the client during development
• Diagnosing exchange ordering or GraphQL error behavior in a urql app

Under The Hood

Architecture - The package exports a single devtoolsExchange that taps into urql’s exchange pipeline (src/exchange.ts). It observes the operation and result streams, builds debug messages, and relays them to the browser extension through a messaging layer (src/utils/messaging.ts) that bridges the client and the devtools content script. It also handles SSR by no-oping outside the browser.

Tech Stack - Written in TypeScript against urql’s exchange API and wonka streams. It relies on window/postMessage-style messaging to communicate with the extension and includes TypeScript ambient declarations for urql and the devtools window hooks.

Code Quality - The source is small and well tested, with unit tests for the exchange, its SSR behavior, and the messaging and display-name utilities. CI runs via CircleCI and dependencies are kept current through Renovate.

API Design - Integration is a one-liner: import devtoolsExchange and place it first in the exchanges array. There is no configuration to learn - the exchange is inert without the extension installed - which makes adoption low-risk and the developer experience straightforward.