skills.rest
jdrets
jdretsCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-query

Manage React server state with TanStack Query v5 patterns.

Updated Jul 9, 2026
Search Tags:#typescript#react#state-management#ssr#tanstack-query#data-fetching
One-click install
npx skills add https://github.com/jdrets/iSeeyou --skill tanstack-query-jdrets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/jdrets/iSeeyou/tree/main/.cursor/skills/tanstack-query
Command: npx skills add https://github.com/jdrets/iSeeyou --skill tanstack-query-jdrets

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill addresses the complexity of managing server state in React applications, specifically helping developers navigate the breaking changes and new patterns introduced in TanStack Query v5.

Core Features & Use Cases

  • Migration Support: Provides clear guidance on v4 to v5 breaking changes like object syntax, gcTime, and throwOnError.
  • Advanced State Management: Covers cross-component mutation tracking with useMutationState and simplified optimistic updates.
  • SSR & Hydration: Offers solutions for debugging streaming server components and hydration issues.

Quick Start

Use the tanstack-query skill to refactor my existing useQuery hook to the v5 object syntax and implement the correct error boundary pattern.

Frequently Asked Questions about tanstack-query

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate React useQuery hooks to the new TanStack Query v5 object syntax?▼

To migrate React useQuery hooks to TanStack Query v5, refactor them to use the new object syntax for arguments. This skill provides implementation patterns for updating arguments, adjusting gcTime, and configuring throwOnError for error boundaries.

What is the best way to track cross-component mutations in a React application?▼

The best way to track cross-component mutations in React is using the useMutationState hook. It enables simplified optimistic updates and robust tracking of mutation states across large-scale frontend projects.

How do I debug server-side rendering hydration issues with React server state?▼

Debugging React server state hydration issues involves resolving streaming server component mismatches during SSR. This skill offers targeted solutions for identifying and fixing hydration errors in TanStack Query v5 applications.

How do I implement type-safe query options for data fetching in React?▼

Implementing type-safe query options for React data fetching requires defining strongly typed configurations for useQuery. This skill satisfies TypeScript requirements for optimized caching strategies and robust error handling using modern React hooks.

Does TanStack Query v5 work with TypeScript for complex server state management?▼

Yes, TanStack Query v5 works with TypeScript to manage complex server state. It provides type-safe query options and implementation patterns to facilitate data fetching, mutation tracking, and SSR hydration across large-scale projects.

Related Skills

Explore More Software Engineering Skills→
masanao-ohbamasanao-ohba
2

react-query-patterns

Automate TanStack React Query server state patterns in TypeScript React projects.

Community
Intermediate
FenntasyFenntasy

react-router

Automate server-first data loading and mutations for React Router v7 SSR applications.

Community
Advanced
messebmesseb

state-management

Guide frontend state management with TanStack Query, Pinia, and Zustand.

Community
Intermediate
Takeaki0817Takeaki0817

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, React Query, or SWR.

Community
Intermediate