URQL の devtool を Chrome で動かす

概要

GraphQL クライアントライブラリの一種である URQL でも　devtool を導入し、クエリ結果及びキャッシュの状態を確認できるようにする。

バージョン情報

• urql 3.0.3
• urql-devtools 2.6.3
• @urql/devtools 2.0.3
• Google Chrome 106

前提

urql はインストール済みで既に使用中であることを前提とする。

手順

Chrome 拡張をインストール

devtool 用の　exchange (urql におけるミドルウェアやプラグインのようなもの) をインストール

# npm
npm i @urql/devtools

# yarn
yarn add @urql/devtools

クライアントセットアップ時に exchange をインストール。　(デフォルトの exchange を上書きしないようにする)

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

const urqlClient = createClient({
  url: '/api/graphql',
  exchanges: [devtoolsExchange, ...defaultExchanges]
})

Chrome を開いて、 Urql タブを開くと devtool が動いてるのが確認できる。