Client State & Data Orchestration

What problem does it solve?

This Skill addresses the complexity of managing data flow between server-side data sources and the client-side user interface, ensuring a clear separation of concerns and efficient data handling.

Core Features & Use Cases

• Server State Management: Utilizes TanStack Query for caching, background refetching, and managing loading/error states for data originating from databases or external APIs.
• Local Client State Management: Employs Zustand for UI-specific state that doesn't require persistence, such as modal visibility, sidebar toggles, or ephemeral user inputs.
• Interoperability: Implements a "Reference Pattern" where Zustand holds references (like IDs) that TanStack Query uses to fetch the corresponding resources.
• Use Case: In a dashboard application, Zustand might track the activeApplicationId, and TanStack Query would use this ID to fetch and display the details of the selected application.

Quick Start

Use the client-state-standards skill to understand how to manage server state with TanStack Query and local client state with Zustand.