TanStack Query DevTools

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