state-management
Master server-side data fetching and caching with React Query v5, plus client state patterns using Zustand v5. This skill covers query setup, cache invalidation, mutations, optimistic updates, and combining both libraries for complete state control.
state-management implements server state fetching and caching patterns using React Query and Zustand for efficient data management.
AI-generated summary based on this skill's SKILL.md
Install
AsyrafHussin/agent-skills/state-management
git clone https://github.com/AsyrafHussin/agent-skills
cp -r agent-skills/skills/state-management ~/.claude/skills/state-managementFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you use useQuery and useMutation in state-management?
state-management teaches useQuery for fetching and caching server data with automatic background refetching, and useMutation for handling create/update/delete operations. useQuery accepts a query key and async function, returning data, loading, and error states. useMutation lets you trigger changes and handle onSuccess/onError callbacks for side effects like cache invalidation or optimistic updates.
What's the difference between server state and client state in state-management?
state-management distinguishes server state (fetched data managed by React Query) from client state (UI preferences, forms managed by Zustand). Server state requires caching, synchronization, and invalidation strategies. Client state is local and doesn't need network sync. Combining both libraries lets you handle each appropriately: React Query for server concerns, Zustand for client-only values.
How does state-management handle react query caching and invalidation?
state-management covers cache invalidation strategies using queryClient.invalidateQueries() to mark queries stale after mutations, triggering refetches. Query keys are organized hierarchically for precise invalidation. The skill teaches cache time configuration, stale time tuning, and when to use background refetching versus immediate invalidation for optimal UX.
How do you set up Zustand store with TypeScript in state-management?
state-management shows creating typed Zustand stores with TypeScript interfaces for state and actions. Stores use create() to define state, getters, and setters. The skill covers selectors for preventing unnecessary rerenders through shallow comparison, persist middleware for localStorage, and combining multiple stores for complex applications.
What optimistic updates does state-management teach for React Query?
state-management covers optimistic updates by updating cache immediately before server confirmation, rolling back on error. You use queryClient.setQueryData() to update cache, then revert if the mutation fails. This pattern improves perceived performance. The skill also covers mutation callbacks (onSuccess, onError) for cache invalidation and side effects.
How does state-management combine React Query with Zustand?
state-management teaches integrating React Query for server data and Zustand for client state in one architecture. React Query handles fetching, caching, and synchronization; Zustand manages UI state, preferences, and auth tokens. The skill covers using Zustand's persist middleware for hydration and coordinating invalidation between both libraries for consistent state.
SKILL.md
rendered from the published skill — quoted content, verbatim
State Management with React Query + Zustand
Version 1.1.0 | TanStack Query v5 | Zustand v5 | March 2026
> Note: > This document provides comprehensive patterns for AI agents and LLMs working with > TanStack Query v5 and Zustand v5. All examples are verified against v5 APIs. > Optimized for automated refactoring, code generation, and state management best practices.
v5 Breaking Changes (Quick Reference)
TanStack Query v5:
- cacheTime → gcTime
- keepPreviousData option → placeholderData: keepPreviousData (imported helper)
- isPreviousData → isPlaceholderData
- onSuccess/onError/onSettled removed from useQuery — still valid on useMutation
- suspense: true on useQuery removed → use useSuspenseQuery
Zustand v5:
- shallow as 2nd arg removed → useShallow from zustand/shallow
- Selectors
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/state-management/AGENTS.md
skills/state-management/README.md
skills/state-management/SKILL.md
skills/state-management/metadata.json
skills/state-management/rules/_sections.md
skills/state-management/rules/_template.md
skills/state-management/rules/rq-cache-time.md
skills/state-management/rules/rq-dependent-queries.md
skills/state-management/rules/rq-enabled-option.md
skills/state-management/rules/rq-infinite-queries.md
skills/state-management/rules/rq-initial-data.md
skills/state-management/rules/rq-mutation-callbacks.md
skills/state-management/rules/rq-mutation-setup.md
skills/state-management/rules/rq-mutation-side-effects.md
skills/state-management/rules/rq-mutation-variables.md