Overview | React Query | TanStack

教學： React Query Essentials | Learn TanStack

這個影片教學是 2.0 的

有些更動請參考：

Migrating to React Query 3 | React Query | TanStack 來看。

queryClient

新版本又不一樣了，去看一下 Initial Query Data | React Query | TanStack

queryClient.getQueryData()

• 22_Seeding Initial Query Data from Other Queries 在上面例子中， posts query 已經擁有 post query 需要的資料了 上面例子中，就可以應用之前說過的 initialData 選項。 initialData 通常搭配 staleTime 使用。

The default QueryCache is gone. For real this time!

影片教學中的 queryCache 整個被拔掉了。 必須使用 queryClient 操作。

QueryClient | React Query | TanStack 在 App component 把 queryClient 傳給需要使用的子 component （在這邊是 Post ）接著，就跟教學中的一樣了… 這邊研究超久~！ 自己試出來的…

• 補充： 在子 component 直接使用 useQueryClient useQueryClient | React Query | TanStack

不用從最上層傳遞下去。

queryClient.setQueryData()

23_Using Query Data to Seed Future Queries 相較於在 Post 設定 initialData, 使用 getQueryData 從 Posts 的快取拿資料； 另一個做法：在 Posts 設定快取資料給 posts

記住上一次的捲動位置

25_Scroll Restoration 去看影片。 Scroll Restoration | React Query | TanStack

搭配 react-router-dom 即可，根據頁面的 cacheTime 。按瀏覽器上一頁，會自動記住位置，什麼設定都不用改。

Query Invalidation

Query Invalidation | React Query | TanStack

queryClient.invalidateQueries

• 要解決的問題：Waiting for queries to become stale before they are fetched again doesn’t always work, especially when you know for a fact that a query’s data is out of date because of something the user has done. For that purpose, the QueryClient has an invalidateQueries method that lets you intelligently mark queries as stale and potentially refetch them too!

• 忽略 staleTime 的設定，query 直接變成 stale 狀態

27_Query Invalidation Basics QueryClient | React Query | TanStack

• invalidateQueries
• refetchActive

invalidateQueries 手動讓 query 變成 stale 狀態 預設行爲： 從 fetching –> stale

28_Invalidating Without Refetching Active Queries query refetchActive: false 以上的設定，會忽略 staleTime 的設定，馬上變成 stale 狀態 原本：fetching–> fresh – 過一段時間 –> stale 變成：fetching –> stale

29_Invalidating & Refetching Inactive Queries refetchInactive: true 以上的設定，query 在 inactive 狀態時候（通常是對應的 react conponent unMount 沒有在畫面上），手動 fetching

30_Invalidating Multiple Queries with Similar Query Keys 在使用 random api 時候（每次回來的 response 不一定） queryKey 可以使用 ['queryName', '後綴'] ，這樣可以針對不同的使用場景 影片裡面說的很清楚。 第一個參數中括號 [] ，整個會是一個 queryKey 通常這樣用： ['queryName', {一個物件有著要傳入的各項參數}]

• e.g. ['getPics', {limit, size}]

prefetching

queryClient.prefetchQuery

QueryClient.prefetchQuery() function is async, but does not return the data from the query. If you require the data, use the new QueryClient.fetchQuery() function

prefetchQuery 跟 fetchQuery 參數傳法都一樣，差別在 prefetchQuery 不回傳 data。而這兩個要傳的 option 裡面的屬性也都大致相同。

31_Basic query prefetching Prefetching | React Query | TanStack 可以預先 prefetch inactive 的 query 使用者會使用那些 inactive 的 query，可以預先 prefetch

32_Hover-based query prefetching 經常搭配 staleTime: Infinity Gatsby 也有這樣的功能。