The official exchange for use with Urql Devtools

Usage no npm install needed!

<script type="module">
  import urqlDevtools from 'https://cdn.skypack.dev/@urql/devtools';



Urql Devtools Exchange

The official devtools exchange for use with the Urql Devtools browser extension

CircleCI Build Status NPM Release Spectrum badge Licence MIT


A first-party exchange for urql which interfaces with the Urql Devtools browser extension.


Install this package

# npm
npm i @urql/devtools

# yarn
yarn add @urql/devtools

Add the exchange to your urql client

import { createClient, defaultExchanges } from 'urql';
import { devtoolsExchange } from '@urql/devtools';

const client = createClient({
  url: 'http://localhost:3001/graphql',
  exchanges: [devtoolsExchange, ...defaultExchanges],

Note: we recommended putting this exchange before all other exchanges (as demonstrated above)


Have experience working with devtools extensions or want to get involved? Check out our contributing docs to get started.