data-client-react_skill

Overview

This skill exposes React hooks and components for Async State Management using @data-client/react. It provides Suspense-first data fetching, cache reads, live subscriptions, programmatic queries, and type-safe imperative controls for REST/GraphQL/SSE/WebSocket flows. Use it to compose normalized, reactive UI with minimal boilerplate.

How this skill works

Hooks like useSuspense, useDLE, useQuery, and useCache read and optionally fetch data via resource definitions. useLive and useSubscription attach live updates (polling, SSE, websockets) while useController lets you perform mutations and manage cache imperatively. AsyncBoundary and DataProvider wire error/loading boundaries and global store providers for predictable rendering.

When to use it

• Render data with React Suspense and automatic caching (useSuspense).
• Show loading/error without Suspense or in event handlers (useDLE, useLoading).
• Read cached state without triggering a network request (useQuery, useCache).
• Subscribe to live updates or push notifications (useLive, useSubscription).
• Perform type-safe mutations and update cache optimistically (useController).
• Debounce user input affecting queries (useDebounce) and wrap components with AsyncBoundary.

Best practices

• Wrap fetching components with AsyncBoundary for unified loading and error UI.
• Prefer small components that render one resource or view to keep Suspense boundaries fine-grained.
• Use useDebounce for inputs that drive async queries to avoid excessive fetches.
• Track mutation state with useLoading and update cache via controller methods for optimistic UX.
• Define resources and schemas separately to leverage automatic normalization and type-safety.

Example use cases

• Render a todo detail with useSuspense and enable live updates with useLive for collaborative apps.
• List paginated resources, fetch next page with controller.fetch and insert results into cache.
• Implement search input that debounces user typing, then wraps the result list in AsyncBoundary.
• Subscribe to server-sent events for real-time feed updates using useSubscription and a custom Manager.
• Perform form submit using useLoading to show submit state and update the normalized list via ctrl.fetch.