[npm] react-query
此篇為各筆記之整理,非原創內容,資料來源可見下方連結與文後參考資料:
- React Query: Server State Management in React @ Udemy
- Mastering Mutations in React Query @ TkDodo's blog
- TanStack Query
練習用 repo @ gitlab
warning
部分 API 或用法在 React Query v4 可能已不適用,詳情參考:Migrating to React Query 4。
Concept
React Query 的作用(How)
React-query 會介於 React 和 API Server(Data) 之間,所有透過 React 向 Server 發送的請求都會先經過 react-query。
react-query 在 React 和 server 之間扮演了資料管理和 cache 的角色,開發者需要告知 react-query 什麼時候要更新 cache、什麼時候要重新向 server 發送 API 請求。
解決了什麼(Why)
Client State vs. Server State
- client state:和瀏覽器本身較相關的狀態,例如,使用者選擇的 theme、language 等
- server state:資料本身保存在伺服器,但需要用來顯示在 UI 上的
status vs. fetchStatus
Why two different states @ TanStack Query v4
使用 React Query v4 拉取資料是,會有兩個狀態:
status
:指的是 data 的狀態,用來判斷「資料是否存在」,其狀態型別為QueryStatus
,包含:loading
、error
、success
fetchStatus
:指的是queryFn
的狀態,用來判斷「queryFn 是否有在執行」, 其狀態型別為FetchStatus
,包含:fetching
、pause
、idle
。
staleTime vs. cacheTime
staleTime — 和重新拉取資料的時間有關
staleTime
指的是資料多久後算過期(stale),決定了什麼時候要向 server 發送請求以取得最新的資料,過期後的 query 才會需要要向 server 發送請求以取得最新的資料,預設是 0。
warning
react-query 並不會在該 query stale 後就立即向 server 發送請求去取得最新的資料,還需要特定的 trigger 下才會執行 refetch 的動作,這些 trigger 像是 window 再次被 focus 時、元件重新 mount 等等,可以參考 useQuery API 中對於 refetch 的說明。