data-fetching-architecture

Call the store's useFetchXxx hook, which wraps useClientDataSWR and writes results into Zustand state via onSuccess. Read the data from the store with a selector, and never use useEffect or call lambdaClient directly in components.

Move the API call into a service method, add a useFetchXxx hook in the store slice using useClientDataSWR with a constant cache key, then have the component call the hook and read state from the store. The skill includes a full before-and-after migration example.

Mutation actions call the service method, then run refreshXxx helpers that call SWR's mutate() on the matching cache key. Update and delete also apply optimistic reducer dispatches with per-item loading flags before refreshing from the server.

A success-only init flag never flips when the request fails, so the UI stays in a loading or fake empty state. Destructure error and mutate from the SWR response and render AsyncBoundary or AsyncError before any empty, NotFound, or zero-value branch.

Use a simple array for list views and a Record<string, T> detail map keyed by id for caching individual entities. For lists scoped to a parent entity, key the map by the parent id as shown in the references walkthrough.