← ClaudeAtlas

swrlisted

SWR v2 (stale-while-revalidate) data fetching for React and Next.js. Use when implementing or reviewing code that uses the `swr` package — useSWR hooks, cache keys, revalidation, mutations, pagination, or SWRConfig.
Firzus/agent-skills · ★ 1 · Web & Frontend · score 72
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