swrlisted
Install: claude install-skill Firzus/agent-skills
# SWR
Reference for SWR v2, the React Hooks library for stale-while-revalidate data
fetching. Prefer the project's existing data layer, fetchers, and hook
conventions; apply these rules on top so cache identity, revalidation, and
mutation behavior stay predictable.
Branch-specific references, loaded on demand:
- [pagination.md](./pagination.md) — `useSWRInfinite` for paginated and
cursor-based lists.
- [subscriptions.md](./subscriptions.md) — `useSWRSubscription` for WebSocket
and realtime sources.
- [nextjs.md](./nextjs.md) — App Router boundaries, server prefetch, and
`fallback` hydration.
## First Checks
1. Confirm `swr` is installed (`package.json`, lockfile) and which package
manager the project uses.
2. Find existing fetchers, API clients, auth token handling, error types, and
reusable data hooks before introducing new patterns.
3. In Next.js App Router, identify the client/server boundary first — see
[nextjs.md](./nextjs.md).
## Keys: The Key Is The Cache Identity
The SWR `key` is the sole identity of a cached resource. Every input that
changes the response belongs in the key: URL, query params, user scope, locale,
tenant, auth token, filters. A value read inside the fetcher but absent from
the key returns data under the wrong identity.
| Case | Pattern | Why |
|------|---------|-----|
| Simple resource | `useSWR('/api/user', fetcher)` | String key is passed to `fetcher`. |
| Conditional fetch | `useSWR(userId ? ['/api/user', userId] : null, fetc