data-fetchinglisted

# LobeHub Data Fetching Architecture > **Related Skills:** > > - `store-data-structures` - How to structure List and Detail data in stores (Map vs Array patterns) ## Architecture Overview ``` ┌─────────────┐ │ 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 ### ❌ DON'T 1. **Never use useEffect** for data fetching 2. **Never call lambdaClient** directly in components or stores 3. **Never use useState** for server data 4. **Never mix data structure patterns** - Follow `store-data-structures` skill > **Note:** For data structure patterns (Map vs Array, List vs Detail), see the `store-data-structures` skill. --- ## Layer 1: Service Layer ### Purpose - Encapsulate all API calls to lambdaClient - Provide clean, typed interfaces - Single