React
Data fetching with SWR
Learn to fetch cached data with SWR.
What is SWR?
SWR (stale-while-revalidate) is Vercel's cached data-fetching library. A useSWR call fetches the data, caches it and revalidates in the background.
SWR shares the data across every component that uses the same key; one request updates many components. This makes server state management easy.
SWR offers auto retry, refetch on focus and pessimistic updates out of the box.
The useSWR call
useSWR takes two parameters: a key (usually a URL) and an optional fetcher function. The return value is the { data, error, isLoading } object.
On first render isLoading is true; when data arrives data fills and isLoading turns false. On error error is set.
As long as the key matches, SWR uses the cache; this makes data appear instantly across page navigations.
Exercise ProductList with useSWR
Complete the skeleton. Write a ProductList component. Use useSWR to fetch '/api/products' (use (url) => fetch(url).then(r => r.json()) as fetcher). If isLoading render <p>Loading</p>, if error render <p>Error</p>, otherwise render <ul> with products.map(p => <li key={p.id}>{p.name}</li>). Add export default.
Show example solution
import useSWR from 'swr';
function ProductList() {
const { data: products, error, isLoading } = useSWR(
'/api/products',
(url) => fetch(url).then((r) => r.json())
);
if (isLoading) return <p>Loading</p>;
if (error) return <p>Error</p>;
return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}
export default ProductList;
Test yourself
-
What does SWR stand for?
It shows stale cached data while revalidating in the background.
- stale-while-revalidate
- state-with-reducer
- sync-web-request
- server-worker-render
Show answer
stale-while-revalidate — SWR stands for stale-while-revalidate.
-
useSWR return value
const { data, error, ____ } = useSWR('/api/products', fetcher);
Show answer
const { data, error, isLoading } = useSWR('/api/products', fetcher);
-
Data fetching with SWR: match the terms
- useSWR
- Fetches data
- data
- Returned data
- error
- Error object
- isLoading
- Is loading
Next lesson: React Query basics
