React query 的 stale 機制

一直以來沒搞很清楚的 react-query 的兩個機制

在 useQuery hook 中有兩個參數 staleTime 和 cacheTime

這兩個具體上的不同是什麼？

先講論好了

staleTime 是告訴 react query 這個資料多久之內是最新的

cacheTime 是告訴 react query cache 的 data 要 cache 多久

–

fresh

打開 react query dev tools 可以看到 fresh 和 stale 兩個 tag

而 staleTime 所定義的時間為「多久後」資料會變成 fresh

因此 staleTime 設定為 0 的時候就不會有 fresh 狀態的 data

那問題來了

fresh 代表什麼意思？

fresh 狀態的資料不用重新 call api

沒錯

就是直接從 cache 拿資料

stale

其實 stale 很簡單

就是下次在 render 的時候會重新 call api 拿資料

並「更新」cache 的 data

這邊為何說是「更新」，後面會解釋

最大的疑問

cacheTime = 0 乍看之下和 staleTime = 0 怎麼好像沒有差異？

cacheTime 到了，就會把 cache 的資料丟棄

staleTime 到了，就會將資料視為「陳舊」的資料

–

這就是為什麼兩個時間設置為 0 都會重新獲得資料

所以 staleTime 到了是更新 cache data

cache Time 到了是重新加到 cache

因為實際上 cache 不會只有 data 還有一些狀態