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 
    }
})

SWR = stale-while-revalidate

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

文章推薦的 option 設定：

• revalidateOnMount: component 在 mount 時就進行 data fetching（建議打開）
• revalidateOnFocus: 被 focus 時就進行 data fetching（建議關閉）
• fetcher

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

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

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

1.0 以前叫做 `initialData`

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

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

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

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

fetch 失敗時會回傳的 error。

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

1.0 以前叫做 `revalidate`

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

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

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

size 的 setter。

• https://medium.com/starbugs/279ac4f26189
• https://medium.com/手寫筆記/485b8e41ef78