Tanstack Query Devtools

TanStack Query DevTools — a browser extension for debugging TanStack Query (React Query) applications in real time.

What it does

Inspect every query and mutation in your app as they happen. See cache state, status transitions, and data payloads — all without adding any devtools dependency to your bundle.

Features

• Live query & mutation inspection — watch queries and mutations update in real time
• Detailed view — drill into individual queries/mutations to see status, data, and metadata
• Interactive data tree — explore query and mutation data as an expandable, collapsible tree
• Inline data editing — modify cached query data directly from the devtools
• Cache actions — invalidate, refetch, reset, or remove queries; clear the mutation cache
• Status badges — at-a-glance indicators: fresh, stale, fetching, paused, inactive, error
• Search & sort — filter by query key, sort by key, status, or last updated time
• Popup & DevTools panel — use as a standalone popup or as a panel inside browser DevTools

Setup

Expose your QueryClient on the window:

window.TANSTACK_QUERY_CLIENT = queryClient;

Navigate to your app. The extension icon turns colored when a QueryClient is detected.

Click the icon for the popup, or open DevTools → TanStack Query for the full panel.

Why use this instead of the built-in TanStack Query DevTools?

• Zero bundle impact — nothing ships to production
• Works on any TanStack Query app (React, Vue, Solid, Angular, Svelte) as long as you expose the QueryClient
• Full DevTools panel integration alongside other browser developer tools
• Persistent across page navigations within the same tab