data-fetching

Centralize API calls behind a service layer with Zustand and SWR.

Updated Mar 2, 2026

Search Tags:#zustand #state-management #swr #api-calls #data-fetching #service-layer #frontend-architecture

Ready to run

npx skills add https://github.com/Staysr/lobe-windos-build --skill data-fetching-staysr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: data-fetching
Source: https://github.com/Staysr/lobe-windos-build/tree/main/.agents/skills/data-fetching
Command: npx skills add https://github.com/Staysr/lobe-windos-build --skill data-fetching-staysr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data fetching in modern front-end apps is often scattered across components, leading to inconsistent state and brittle API calls. This guide defines a cohesive architecture that uses a Service Layer, Zustand Stores, and SWR to centralize data fetching, caching, and mutations.

Core Features & Use Cases

Centralized API operations via a dedicated service layer (e.g., list/get/create/update/delete patterns).
State management with Zustand + SWR hooks for reactive, cache-friendly UI.
Deterministic mutations with optimistic updates and cache invalidation strategies.
Real-world scenarios include dashboards, tables with lists and detail views, and cross-component data sharing.

Quick Start

Configure your project to route all API requests through a single service layer, expose data through SWR-powered store hooks, and begin by implementing list and detail fetches for a domain entity.

Frequently Asked Questions about data-fetching

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is the best way to structure data fetching and API calls in a frontend application?▼

Using Zustand with SWR for data fetching enables reactive, cache-friendly UI updates. This combination centralizes state management, allowing components to subscribe to data changes while SWR handles caching and revalidation automatically.

How do I implement optimistic updates with SWR and Zustand?▼

A Zustand store combined with SWR provides deterministic mutations with optimistic updates and robust cache invalidation. This setup enables reactive data sharing across components for real-world scenarios like dashboards and detail views.

Do I need a service layer if I already use SWR for data fetching?▼

A service layer is needed alongside SWR to centralize API operations like create, update, and delete. Routing all requests through this layer prevents inconsistent state and brittle API calls scattered across individual components.

How does a service layer architecture handle cross-component state sharing?▼

A service layer architecture handles cross-component state sharing by exposing data through SWR-powered Zustand store hooks. This layered approach ensures all components access a single, reactive source of truth for fetched data.

Why does my frontend state become inconsistent when fetching data across multiple components?▼

Frontend state becomes inconsistent because data fetching is often scattered directly within components. Centralizing API calls behind a service layer with Zustand and SWR resolves this by enforcing a single source of truth.