# useSWR 筆記

## Summary

```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
  - SWR 是由 vercel 團隊所開發的一套基於 React Hooks 架構下的 data fetching library
  - 解決的問題？
    * 重複拉資料
    * 滿足 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 失敗時也會套用。

--
-
### 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](https://github.com/onderonur/react-infinite-scroll-hook) 搭配使用

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


#### 1. size

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



#### 2. setSize

size 的 setter。

### Ref

- <https://medium.com/starbugs/279ac4f26189>
- <https://medium.com/手寫筆記/485b8e41ef78>