Data Fetching Demo

Demonstrates React Query patterns with loading, empty, error, and success states.

Demo Controls

Switch modes to see different states. Uses query params for bookmarkable URLs.

Mode:

0 items • mode: success

Demo Items

Data fetched from /api/demo/items with mode-based behavior

Patterns Demonstrated

Query Key Factory

demoItemsKeys.list({ mode }) for consistent cache keys

Optimistic Updates

Toggle status updates UI immediately, rolls back on error

Cache Invalidation

Mutations invalidate list queries to refetch fresh data

App States Kit

SkeletonList, EmptyState, ErrorFallback from @atlas/ui