Skip to main content

SWR

React Hooks library for data fetching.

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

With SWR, components will get a stream of data updates constantly and automatically. And the UI will be always fast and reactive.
Refer to official documentation for detailed usage. →

useSWR#

Pass an API key and start using it inside any function components:

import useSWR from 'swr';
const fetcher = url => fetch(url).then(r => r.json());
function Profile () {  const { data, error } = useSWR('/api/user/123', fetcher);
  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  // render data  return <div>hello {data.name}!</div>}

fetcher is an async function that accepts the key of SWR, and returns the data. You can use any library to handle data fetching.

import axios from 'axios';
const fetcher = url => axios.get(url).then(res => res.data);

Refer to official documentation on data fetching for detailed usage. →

Mutation#

useSWR also returns a mutate method that is pre-bound to SWR's key

import useSWR from 'swr';
function Profile () {  const { data, mutate } = useSWR('/api/user', fetcher);  return (    <div>      <h1>My name is {data.name}.</h1>      <button onClick={async () => {        const newName = data.name.toUpperCase();        // send a request to the API to update the data        await requestUpdateUsername(newName);        // update the local data immediately and revalidate (refetch)        // NOTE: key is not required when using useSWR's mutate as it's pre-bound        mutate({ ...data, name: newName });      }}>Uppercase my name!</button>    </div>  )}

mutate can also be imported directly form swr

import useSWR, { mutate } from 'swr';
function App () {  return (    <div>      <Profile />      <button onClick={() => {        // set the cookie as expired        document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';        // tell all SWRs with this key to revalidate        mutate('/api/user');      }}>        Logout      </button>    </div>  )}

Refer to official documentation on mutation for detailed usage. →

Adding SWR to your project later#

If you didn't choose the plugin during project creation phase, you can follow the instructions below to add it.

  • Install swr package.
npm install swr