This skill describes patterns for client-side data fetching and caching.
1. Core rules
Prefer a single data access layer (API client + feature APIs).
Use stable query keys for caching.
Invalidate caches intentionally on mutations.
Keep loading/error UX consistent (Suspense or explicit states).
2. Query key pattern
Example shape:
["users", "list", filters]
["users", "detail", userId]
Avoid:
keys that depend on unstable object identity
mixing unrelated resources in a single key
3. Mutation pattern
After a successful mutation:
invalidate affected list queries
update detail caches when possible
4. Error handling
Show user-friendly errors.
Capture exceptions to monitoring with route/feature context (when available).
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: willyu1007-ai-first-template-data-fetching3description: Data Fetching4---56# Data Fetching78This skill describes patterns for client-side data fetching and caching.910---1112## 1. Core rules13141. Prefer a single data access layer (API client + feature APIs).152. Use stable query keys for caching.163. Invalidate caches intentionally on mutations.174. Keep loading/error UX consistent (Suspense or explicit states).1819---2021## 2. Query key pattern2223Example shape:24- `["users", "list", filters]`25- `["users", "detail", userId]`2627Avoid:28- keys that depend on unstable object identity29- mixing unrelated resources in a single key3031---3233## 3. Mutation pattern3435After a successful mutation:36- invalidate affected list queries37- update detail caches when possible3839---4041## 4. Error handling4243- Show user-friendly errors.44- Capture exceptions to monitoring with route/feature context (when available).4546---47> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.48<!-- tomevault:4.0:skill_md:2026-04-14 -->
Run npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-data-fetching in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Data Fetching It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io