TanStack Query DevTools Autor: DeeCode

Debug TanStack Query without shipping devtools to production.

See every query and mutation the moment it changes — cache state, status
transitions, full data payloads — from your browser toolbar or right inside
DevTools. No package to install, no bundle to grow, nothing to strip before
release.

WHAT YOU GET

• Live inspection — queries and mutations update in real time as your app runs
• Deep dive — status, data, and metadata for any single query or mutation
• Interactive data tree — expand, collapse, and explore deeply nested payloads
• Inline editing — change cached data on the spot and watch your UI react
• One-click cache actions — invalidate, refetch, reset, or remove queries; clear the mutation cache
• Status at a glance — fresh, stale, fetching, paused, inactive, error
• Search & sort — find any query by key; sort by key, status, or last updated
• Two ways to work — toolbar popup for a quick peek, DevTools panel for a real session
• Stays connected — survives page navigation within the tab

SETUP IS ONE LINE

window.__TANSTACK_QUERY_CLIENT__ = queryClient;


Reload your app. The toolbar icon lights up the moment a QueryClient is
detected. Click it for the popup, or open DevTools → TanStack Query for the
full panel.

WHY NOT THE BUILT-IN DEVTOOLS?

• Zero bundle impact — nothing ships to production, ever
• Framework-agnostic — React, Vue, Solid, Svelte, Angular: if it runs TanStack Query, it works
• Sits alongside your other DevTools panels instead of floating over your app
• No conditional imports, no tree-shaking tricks, no cleanup before release

Free and open source (MIT):
github.com/DeeCode-inc/tanstack-query-chrome-devtools