SWR

swr-patterns.md

// /swr/project.js
import useSWR, { mutate } from 'swr'

export async function fetchProject (id) {
  mutate(`/api/project/${id}`, fetch(`/api/project/${id}`))
}

export default function useProject (id) {
  // don't pass the fetcher so it won't fetch
  return useSWR(`/api/project/${id}`)
}

// components/project.js
function Project ({ id }) {
  const { data } = useProject(id)
  
  return <>
    {data}
    <button onClick={() => fetchProject(id)}>fetch!</button>
  </>
}

fancy stuff

function useNow (interval) {
  return useSWR('now', () => Date.now(), { refreshInterval: interval, initialData: Date.now() }).data
}

function Clock () {
  const now = useNow(1000)
  return <h1>current time is: {now}</h1>
}