data-fetching-architecture
LobeHub data-fetching pipeline guide. Use for service layer, Zustand store, SWR, lambdaClient, useClientDataSWR, useFetchXxx hooks, or migrating useEffect fetches.
Profile →npx skills add lobehub/lobehub --skill data-fetching-architecture --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# LobeHub Data Fetching Architecture > **Related:** `store-data-structures` covers List vs Detail data shape rationale (Map vs Array). ## Architecture Overview ```text ┌─────────────┐ │ Component │ └──────┬──────┘ │ 1. Call useFetchXxx hook from store ↓ ┌──────────────────┐ │ Zustand Store │ │ (State + Hook) │ └──────┬───────────┘ │ 2. useClientDataSWR calls service ↓ ┌──────────────────┐ │ Service Layer │ │ (xxxService) │ └──────┬───────────┘ │ 3. Call lambdaClient ↓ ┌──────────────────┐ │ lambdaClient │ │ (TRPC Client) │ └──────────────────┘ ``` ## Core Principles ### ✅ DO 1. **Use Service Layer** for all API calls 2. **Use Store SWR Hooks** for data fetching (not useEffect) 3. **Use proper data structures** — see `store-data-structures` skill for List vs Detail patterns 4. **Use lambdaClient.mutate** for write operations (create/update/delete) 5. **Use lambdaClient.query** only inside service methods 6. **Naming convention** — read hooks are `useFetchXxx`, cache invalidation helpers are `refreshXxx` (e.g. `useFetchBenchmarks` / `refreshBenchmarks`). Mutations then chain `refreshXxx()` after the service call. ### ❌ DON'T 1. **Never use useEffect** for data fetching 2. **Never cal
- Architecture Overview
- Core Principles
- ✅ DO
- ❌ DON'T
- Layer 1: Service Layer
- Purpose
- Service Structure
- Service Guidelines
- Layer 2: Store with SWR Hooks
- State Structure
- Actions
- Store Guidelines
- Async Failure Boundary Contract
- Layer 3: Component Usage
What does the data-fetching-architecture skill do?
LobeHub data-fetching pipeline guide. Use for service layer, Zustand store, SWR, lambdaClient, useClientDataSWR, useFetchXxx hooks, or migrating useEffect fetches.
How do I install it?
Run `npx skills add lobehub/lobehub --skill data-fetching-architecture --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.