skills.rest
perimetre
perimetreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tanstack-query

Standardize TanStack Query patterns for server-state management in React apps.

Updated Aug 23, 2026
Search Tags:#mutations#react-query#tanstack-query#data-fetching#server-state#cache-invalidation
One-click install
npx skills add https://github.com/perimetre/ai-toolkit --skill tanstack-query-perimetre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-query
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-apps/skills/tanstack-query
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill tanstack-query-perimetre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Query usage patterns address the challenge of keeping server state in sync across client and server components, reducing boilerplate and avoiding stale data by standardizing fetch, cache, and mutation workflows.

Core Features & Use Cases

  • Query Factory Pattern: Define reusable queryOptions factories for consistent keys and configurations across client and server.
  • Client & Server Integration: Use useQuery and useMutation in client components and prefetch in server components to hydrate on the client.
  • Server Prefetching & Hydration: Prefetch data on the server and hydrate on the client with consistent caching keys.
  • Cache Invalidation & Optimistic Updates: Invalidate queries after mutations and apply optimistic updates for instant UI feedback.
  • Dependent Queries & Error Handling: Coordinate queries based on data availability and configure retries and staleTime.

Quick Start

Create a queryOptions factory for your data requests and hook it up with useQuery in a client component to fetch data.

Frequently Asked Questions about tanstack-query

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

FAQPage Schema
How do I manage server state in React without stale data issues?▼

Standardizing server state in React involves using queryOptions factories for consistent keys and useQuery to fetch data, ensuring deterministic caching and preventing stale UI. This reduces boilerplate and keeps client components synced.

What's the best way to handle server prefetching and client hydration in React?▼

Server prefetching in React server components fetches data early, which then hydrates on the client using consistent caching keys. This approach ensures immediate data availability and prevents waterfall requests.

How do I apply optimistic updates and cache invalidation after mutations?▼

Cache invalidation and optimistic updates require configuring useMutation to instantly update the UI, then invalidating specific query keys to refetch and sync server state after the mutation resolves successfully.

Can I coordinate dependent queries based on data availability in React?▼

Yes, dependent queries coordinate sequential data fetching by configuring useQuery to wait until necessary data is available before executing, ensuring proper execution order and preventing null reference errors.

Does TanStack Query work with both client and server components in React?▼

TanStack Query integrates with both client and server components, using useMutation in clients and server prefetching in server components to hydrate data, creating a unified server state workflow.

Why do I need a queryOptions factory for data fetching in React?▼

A queryOptions factory defines reusable configurations and consistent query keys across client and server components, ensuring deterministic caching behavior and reducing duplicate code setup in modern React apps.

Related Skills

Explore More Software Engineering Skills→
recca0120recca0120
11

frontend-data-layer

Build typed frontend data flows with ky, React Query, and Zod.

Community
Advanced
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced
markhamsquareventuresmarkhamsquareventures

inertia

Integrate Link and Form components for React-based Laravel Inertia navigation and handling.

Official
Intermediate
AI-Foundry-CoreAI-Foundry-Core
4

react-state-management

Manage React state across local, global, and server contexts.

Official
Advanced