將抓 api 的邏輯都改用 Tanstack Query

[QzCurious]

以不熟悉 React 的人 來說， 我會建議先使用 useEffect, useState 來抓 api，等有熟悉度之後再來轉 Tanstack Query

我們可以先聊聊看要不要現在就朝 Tanstack Query 走，不用馬上動工

[QzCurious]

昨天有解析一下為什麼不能將抓 api 的邏輯用 useMemo 來實作就好:

之前有說到，useMemo 其實是 "衍生" 的狀態，而抓 api 是會有多種狀態、多個階段:

1. 尚未打 api，state 會是 idle，data 會是 undefined
2. 打 api，這時 state 應該為 loading，data 仍是 undefined
3. api 成功回傳，state 轉為 successed，data 就會有東西

這樣就能明顯看出我們至少需要

// 儲存狀態
const [state, setState] = useState('idle')
const [data, setData] = useState()

// 觸發 fetch
useEffect(() => { fetch(...) }, [])

如果只用 useMemo 就無法表示出這麼多狀態

[DoubleTian-tw]

useMemo只會有"一個"狀態階段也就是"衍生"，當有"多個"階段就不適合使用，例如提到的fetch api