Does this skill support the latest version of TanStack Query?

Yes, the skill is updated for TanStack Query v5, utilizing modern patterns like gcTime (formerly cacheTime) and the latest hooks API.

Can I use this with Next.js App Router?

Absolutely. The skill includes patterns for 'use client' QueryClientProviders and explains how to integrate with Server Components via prefetching.

When should I use TanStack Query vs Zustand?

Use TanStack Query for any data coming from an API (server state). Use Zustand for local-only state like UI themes, shopping carts, or authentication status.

How does this handle optimistic UI updates?

It provides a structured template using onMutate, onError, and onSettled to update the UI immediately, handle server failures gracefully with rollbacks, and refetch to ensure data consistency.

Why does this skill recommend a Query Key Factory?

A Query Key Factory centralizes your cache keys, ensuring type safety and preventing bugs where different parts of an application accidentally use different keys for the same data.

TanStack Query Setup

Name: TanStack Query Setup
Author: IvanTorresEdge

byIvanTorresEdge

API開発

Configures and implements TanStack Query for robust server-state management, caching, and data fetching in React applications.

概要

This skill provides a comprehensive framework for integrating TanStack Query (formerly React Query) into modern React and Next.js projects. It establishes a standardized approach to server-state management by implementing best practices such as centralized query key factories, type-safe data fetching, and optimistic UI updates. By automating the setup of QueryClients and providing patterns for infinite queries and prefetching, it helps developers handle complex async logic, background synchronization, and stale-time management with minimal boilerplate.

主な機能

Strategic prefetching and dependent query implementation
Standardized QueryClient configuration for Next.js and React
0 GitHub stars
Optimistic updates with automated rollback handling
Type-safe query key factories for consistent cache management
Infinite query patterns for high-performance paginated lists

ユースケース

Implementing seamless CRUD operations with optimistic feedback
Optimizing network performance in paginated or infinite-scroll interfaces
Building data-driven dashboards with complex caching requirements

概要

主な機能

Strategic prefetching and dependent query implementation
Standardized QueryClient configuration for Next.js and React
0 GitHub stars
Optimistic updates with automated rollback handling
Type-safe query key factories for consistent cache management
Infinite query patterns for high-performance paginated lists

ユースケース

Implementing seamless CRUD operations with optimistic feedback
Optimizing network performance in paginated or infinite-scroll interfaces
Building data-driven dashboards with complex caching requirements