目錄表

useSWR 筆記

Summary

snippet.js
const fetcher = url => fetch(url).then(r => r.json())
 
const {
    data,
    isValidating,
    error,
    mutate
} = useSWR(url, fetcher, {
    revalidateOnMount: true,
    revalidateOnFocus: false,
    fallbackData: {
      // data for default & error 
    }
})

Note

SWR = stale-while-revalidate

Request

  1. SWR 是由 vercel 團隊所開發的一套基於 React Hooks 架構下的 data fetching library
  2. 解決的問題?
    • 重複拉資料
    • 滿足 Optimistic UI 開發模式:先用預設值把頁面畫好,等資料回來後去更新部分節點

文章推薦的 option 設定:

把這些設定丟進 SWRConfig 就不用每次都重複傳。

這也是為什麼 fetcher 在 useSWR 中會是 optional 的原因。

useSWR 還支援傳入 { fallbackData } 來達成 Optimistic UI。

1.0 以前叫做 `initialData`

這個 fallbackData 除了在 fetch 發生前會套用在 UI 上之外,在 fetch 失敗時也會套用。

--

Response

回傳值有這些: data, isValidating, error, mutate

1. data

SWR 會把回傳的資料外面再用一層 data 物件包裝起來

2. isValidating

在進行 data fetching 的時候會改變,所以可以用這個值判斷是否在 fetching。

3. error

fetch 失敗時會回傳的 error。

4. mutate(data?, shouldRevalidate?)

是一個 function,用來重新獲取資料。

1.0 以前叫做 `revalidate`

useSWRInfinite

用於瀑布流效果,推薦與 react-infinite-scroll-hook 搭配使用

useSWRInfiniteuseSWR 差異不大,僅多了兩個參數:

1. size

簡單來說就是要目前要抓取第幾頁的 data,可以想像成是 index 或 offset 的概念。

2. setSize

size 的 setter。

Ref