tanstack-query-react-nextjs-debugging
Installation
SKILL.md
TanStack Query React Next.js Debugging
For bugfix authorization and plan prerequisites, defer to itsol-workflow-mode; retain evidence, root-cause analysis, TDD/replacement verification, and final review in every mode.
Trace React 19 and Next.js TanStack Query failures from query key to query function, API error mapping, cache state, invalidation, SSR hydration, auth scope, and rendered UI before changing behavior.
Process
- State expected behavior, actual behavior, affected route/component, user/tenant context, environment, and smallest reproducible symptom.
- Gather evidence from React Query Devtools, Network tab, browser console, server logs, request ids, package versions, generated API output, tests, and route/server component code.
- Use
itsol-current-tech-contextwhen symptoms depend on TanStack Query, React, Next.js, Hey API, or package versions. - Classify the failure: key, query function, enabled/dependency, invalidation, mutation, optimistic update, hydration, auth/tenant cache, realtime, persistence, or performance.
- Fix one root cause and verify with a regression test or documented replacement verification.
- Use
itsol-bug-debugging; ingoverned, require an approved Technical Fix Plan before implementation, while autonomous/direct prerequisites come fromitsol-workflow-mode.
Coordination
Use with react-nextjs-debugging, react-nextjs-api-cache-forms, react-nextjs-app-router-rendering, react-nextjs-quality-security, hey-api-openapi-contract-debugging, and security-frontend-browser-review.