From fuse-nextjs
TanStack Query v5 integration with Next.js 16. Server-side prefetching, hydration, useQuery, useMutation, cache management.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-nextjs:nextjs-tanstack-queryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
TanStack Query v5 provides powerful server state management with Next.js 16 integration.
TanStack Query v5 provides powerful server state management with Next.js 16 integration.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| Feature | Benefit |
|---|---|
| Server prefetching | Data ready on first render, no loading flash |
| Automatic caching | Deduplication, stale-while-revalidate |
| Mutations | Optimistic updates, rollback on error |
| DevTools | Visual cache inspection |
| TypeScript-first | Full type inference |
prefetchQuery for SSR datastaleTime on prefetched queries - Prevent immediate refetch on mountqueryClient in Client Components directly - Use hooksbun add @tanstack/react-query @tanstack/react-query-devtools
staleTime - Prevent unnecessary refetches after hydrationinvalidateQueries after writesthrowOnError for critical queriesprocess.env.NODE_ENV check| Need | Reference |
|---|---|
| useQuery, useMutation | query-patterns.md |
| Server prefetching | hydration.md |
| QueryClient setup | hydration.md |
| Cache invalidation | query-patterns.md |
npx claudepluginhub fusengine/agents --plugin fuse-nextjsProvides TanStack Query v5 reference for React data fetching, caching, server state management using useQuery/useMutation hooks, QueryClient setup, optimistic updates, Next.js SSR/hydration, testing, TypeScript, and advanced patterns.
Expert TanStack Query guidance for React and Next.js apps covering asynchronous state management, data fetching, caching, mutations, optimistic updates, and SSR integration.
Prefetches TanStack Query data on the server and hydrates the client cache using dehydrate/hydrate and HydrationBoundary, eliminating loading spinners in Next.js App Router.