目錄表

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 搭配使用

useSWRInfinite 和 useSWR 差異不大，僅多了兩個參數：

1. size

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

2. setSize

size 的 setter。

Ref