How do I install the Nextjs Tanstack Query skill?

Run npx skillmds@latest add fusengine/nextjs-tanstack-query in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Nextjs Tanstack Query safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nextjs Tanstack Query?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nextjs Tanstack Query free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nextjs Tanstack Query?

fusengine (@fusengine) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nextjs Tanstack Query by fusengine — Agent Skill

Name: Nextjs Tanstack Query
Rating: 4.2 (5 reviews)
Author: fusengine

File contents

Covers serializable query keys, staleTime tuning on prefetched queries to avoid immediate refetch, cache invalidation with invalidateQueries after writes, infinite scrolling/pagination, and DevTools setup gated to development only. Does not cover the Server Component boundary itself (nextjs-server-components) or core Next.js caching primitives like use cache (nextjs-16) — this skill is specifically about TanStack Query's client-side cache layer.

TanStack Query for Next.js

TanStack Query v5 provides powerful server state management with Next.js 16 integration.

Agent Workflow (MANDATORY)

Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:

fuse-ai-pilot:explore-codebase - Analyze existing data fetching patterns
fuse-ai-pilot:research-expert - Verify latest TanStack Query v5 docs
mcp__context7__query-docs - Check TanStack Query + Next.js patterns

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

Client-side data fetching with caching and revalidation
Server-side prefetching with hydration to client
Optimistic updates for mutations
Infinite scrolling and pagination
Real-time data synchronization

Why TanStack Query

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

Critical Rules

One QueryClient per request - Create in Server Component, share via context
Prefetch in Server Components - Use prefetchQuery for SSR data
HydrationBoundary required - Wrap client tree to transfer server cache
Query keys must be serializable - Arrays of strings/numbers only
staleTime on prefetched queries - Prevent immediate refetch on mount
Never use queryClient in Client Components directly - Use hooks

Installation

bun add @tanstack/react-query @tanstack/react-query-devtools

Best Practices

Prefetch on server - Avoid loading states for critical data
Set staleTime - Prevent unnecessary refetches after hydration
Collocate query keys - Define keys near their usage
Invalidate on mutation - Use invalidateQueries after writes
Error boundaries - Use throwOnError for critical queries
DevTools in dev only - Wrap in process.env.NODE_ENV check

Reference Guide

Need	Reference
useQuery, useMutation	query-patterns.md
Server prefetching	hydration.md
QueryClient setup	hydration.md
Cache invalidation	query-patterns.md

---name: nextjs-tanstack-querydescription: Use when implementing client-side data fetching, server prefetching with hydration, or optimistic mutations in Next.js 16 with TanStack Query.---<objective>Implements TanStack Query v5 server-state management in Next.js 16: creating one `QueryClient` per request in a Server Component and sharing it via context, `prefetchQuery` for SSR data with `HydrationBoundary` to transfer the server cache to the client, and optimistic mutations with rollback on error.Covers serializable query keys, `staleTime` tuning on prefetched queries to avoid immediate refetch, cache invalidation with `invalidateQueries` after writes, infinite scrolling/pagination, and DevTools setup gated to development only. Does not cover the Server Component boundary itself (nextjs-server-components) or core Next.js caching primitives like `use cache` (nextjs-16) — this skill is specifically about TanStack Query's client-side cache layer.</objective># TanStack Query for Next.jsTanStack Query v5 provides powerful server state management with Next.js 16 integration.## Agent Workflow (MANDATORY)Before ANY implementation, spawn 3 agents in parallel, one `Agent` call each with a `name`:1. **fuse-ai-pilot:explore-codebase** - Analyze existing data fetching patterns2. **fuse-ai-pilot:research-expert** - Verify latest TanStack Query v5 docs3. **mcp__context7__query-docs** - Check TanStack Query + Next.js patternsAfter implementation, run **fuse-ai-pilot:sniper** for validation.---## Overview### When to Use- Client-side data fetching with caching and revalidation- Server-side prefetching with hydration to client- Optimistic updates for mutations- Infinite scrolling and pagination- Real-time data synchronization### Why TanStack Query| 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 |---## Critical Rules1. **One QueryClient per request** - Create in Server Component, share via context2. **Prefetch in Server Components** - Use `prefetchQuery` for SSR data3. **HydrationBoundary required** - Wrap client tree to transfer server cache4. **Query keys must be serializable** - Arrays of strings/numbers only5. **`staleTime` on prefetched queries** - Prevent immediate refetch on mount6. **Never use `queryClient` in Client Components directly** - Use hooks---## Installation```bashbun add @tanstack/react-query @tanstack/react-query-devtools```---## Best Practices1. **Prefetch on server** - Avoid loading states for critical data2. **Set `staleTime`** - Prevent unnecessary refetches after hydration3. **Collocate query keys** - Define keys near their usage4. **Invalidate on mutation** - Use `invalidateQueries` after writes5. **Error boundaries** - Use `throwOnError` for critical queries6. **DevTools in dev only** - Wrap in `process.env.NODE_ENV` check---## Reference Guide| Need | Reference ||------|-----------|| useQuery, useMutation | [query-patterns.md](references/query-patterns.md) || Server prefetching | [hydration.md](references/hydration.md) || QueryClient setup | [hydration.md](references/hydration.md) || Cache invalidation | [query-patterns.md](references/query-patterns.md) |

Frequently asked questions

Nextjs Tanstack Query