When building apps that fetch data, you need a clear plan. This guide shows a three layer approach using a Service Layer, a Zustand Store, and SWR hooks. It helps teams handle API calls, cache results, and update state without messy code.
Developers can stop using useEffect for data loading. Instead they call store hooks like useFetchXxx and get data automatically. The service layer keeps API logic separate and reusable. This makes apps faster and easier to maintain.
If you are moving from old patterns or starting a new feature, this architecture saves time. It works well with any backend that uses a TRPC client. The rules and examples show exactly what to do and what to avoid.
Global
mkdir -p ~/.claude/skills/data-fetchingProject
mkdir -p .claude/skills/data-fetchingSource Repository
Lark Openapi Explorerlarksuite/cli
Discover and call native Lark OpenAPIs not covered by existing CLI commands
Supabasesupabase/agent-skills
Add a database auth and APIs to your app with Supabase
Design An Interfacemattpocock/skills
Generate many different interface designs and pick the best one
Convex Quickstartget-convex/agent-skills
Rapidly set up a Convex backend for new or existing apps with one command
Convex Create Componentget-convex/agent-skills
Create reusable Convex components with isolated tables and clear APIs
Convexget-convex/agent-skills
Use this router to find the perfect Convex skill for your task
Firebase Remote Config Basicsfirebase/agent-skills
Change your app's behavior instantly without a new update
Notion Apiintellectronica/agent-skills
Automate your Notion workspace with simple API calls