<aside> ✨ useSWR = Stale-While-Revalidate

</aside>

一個可以打API撈取資料與Cache的React Hook

在撈取資料前，會先回傳Cache裡面的資料，等待API把資料回傳後，再更新畫面

每次撈取資料都要給一個key，相同的key視為相同的fetch

Screen Shot 2021-12-26 at 10.46.57 PM.png

import useSWR from 'swr'

function App() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

const {
	data,         // fetcher回傳的值，或是undefined
	error,        // fetcher拋出的 error，或是undefined
	isValidating, // 請求在載入中，或是重新驗證中，就會回傳true，否則false
	mutate,       // 用來手動更改data的function
} = useSWR(
	key,          // 字串或null，不同的請求應該要有不同的key，會做為參數傳給fetcher
	fetcher?,     // 真正去fetch data的Promise，可以是fetch或axios.get等等
	options?      // SWR hook的而外參數
)

useSWR hook可以使用的Options：

API Options - SWR

Key

只要是相同的Key，useSWR就會視為相同的fetch，不同的Key會視為全新的fetch
只要Key是null，就不會fetch
通常可以用 API 的Endpoint作為key
就算再不同 component中，相同的key也會視為相同的fetch

function App () {
	const { data: user1 } = useSWR('/api/user/1')
	const { data: user2 } = useSWR('/api/user/2')
}

function Component () {
	// 會先回傳cache的資料
	const { data: user1 } = useSWR('/api/user/1')
}

Screen Shot 2021-12-26 at 11.08.44 PM.png

進階用法：key的部分放一個function，回傳key字串，只要回傳的值是falsy或throw，useSWR就會知道此fetch還沒有要開始

Key

Fetcher