Tanstack Devtools
TanStack DevTools provides debugging panels for inspecting Query cache, Router route trees, and Form field state across React applications. Choose between standalone devtools for individual libraries or a unified panel combining all three with plugin architecture.
TanStack DevTools lets you debug Query cache, Router routes, and Form state in React development.
AI-generated summary based on this skill's SKILL.md
Install
oakoss/agent-skills/tanstack-devtools · repository language: Python
git clone https://github.com/oakoss/agent-skills
cp -r agent-skills ~/.claude/skills/tanstack-devtoolsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install oakoss/agent-skills/tanstack-devtoolsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Tanstack Devtools and what can it debug?
Tanstack Devtools provides debugging panels for inspecting Query cache, Router route trees, and Form field state across React applications. You can choose between standalone devtools for individual libraries or a unified panel combining all three with plugin architecture, making it easier to monitor and troubleshoot your TanStack-powered apps.
How to use tanstack devtools for inspecting queries?
Tanstack Devtools lets you debug and inspect TanStack queries and state in development by visualizing your Query cache in real time. Install the devtools package, add it to your app configuration, and access the debugging panel to see active queries, their status, data, and cache behavior as your application runs.
How do I install and configure Tanstack Devtools locally?
Tanstack Devtools installation involves adding the devtools package to your project dependencies, then initializing it in your application setup. Configuration varies by library—Query, Router, or Form—but typically requires mounting the devtools component or plugin in your app, then accessing the panel through your browser during development.
Can Tanstack Devtools monitor real-time data flow and cache?
Yes, Tanstack Devtools monitors real-time data flow and cache behavior in TanStack apps by displaying live updates to your Query cache, route state, and form fields. Watch requests execute, see cache hits and misses, inspect payload data, and track state changes as they happen during development.
How does Tanstack Devtools help troubleshoot performance issues?
Tanstack Devtools helps troubleshoot TanStack query performance and state issues by exposing cache behavior, query timing, and state mutations in a visual inspector. Identify slow queries, unnecessary refetches, stale data, and state inconsistencies to optimize your application's data flow and responsiveness.
Does Tanstack Devtools work with browser extensions?
Tanstack Devtools offers both browser extension and in-app panel options for debugging. While the primary integration is through the devtools package mounted in your application, browser extensions provide additional convenience for inspecting TanStack state across multiple tabs and sessions during development.