React Query | Next.js 13

> 說明

起初在專案開發上遇到的情境是，需要處裡暫存API資料，當從其他頁面跳轉回來的時候，不需要重新等待API回應的時間，而當時舊有的做法是使用Redux來處理，或是把資料存在localStorage裡，但是這兩種方式都有些許的缺點，Redux的話，需要額外安裝套件，並且需要額外的程式碼來處理，而localStorage的話，則是需要額外的程式碼來處理，並且需要額外的處理過期時間的邏輯，所以後來我找到了React Query這個套件，可以很方便的處理這個情境。

React Query是一個用來管理API的套件，使用情境如下：

• 初次取得資料時，會把資料存在cache裡，當下次再次取得資料時，會先從cache裡取得資料，如果cache裡沒有資料，才會再次請求API。
• 設定cache的時間，過了時間後，會自動重新請求API。
• 手動重新請求API。

> 前置準備

因為在Next.js 13的環境下，預設的components都是在server端執行，而在使用React Query時，需要在client端執行，所以我們需要先建立一個client component的Provider，並且在Layout裡包住children。

> 在Server端如何使用React Query

要特別注意的是，在這裡我們會用Hydrate的功能，用來將queryClient.prefetchQuery出來的資料存在client端的cache裡，這樣在client端如果有相同的queryKey，就不需要重新請求API。

> 在Client端如何使用React Query

這邊我們針對React Query的兩大功能：useQuery、useMutation做解說

• 1. useQuery :

  useQuery是用來取得資料的，當第一次取得資料時，會將資料存在cache裡，當下次再次取得資料時，會先從cache裡取得資料，如果cache裡沒有資料，才會再次請求API，這邊引用了兩個參數：queryKey、queryFn；queryKey是用來做為這個cache的標籤，當再次重新取得API時，就會去偵測react-query是否已經暫存過這筆資料，如果已經存在就會拿取原先暫存的資料，但如果這個key的標籤被刪除，就會刷新API內的暫存資料；queryFn是用來取得資料的function，這邊可以使用async/await來取得資料，並且return出來。

• 2. useMutation :

  useMutation對應到的功能就是POST，這邊引用了兩個參數：mutationFn、onSuccess；mutationFn是用來做為POST的function，這邊可以使用async/await來取得資料，並且return出來；onSuccess是當POST成功後，要做的事情，這邊我們使用了queryClient.invalidateQueries來刷新cache裡的資料，另外也可以使用queryClient.setQueryData來更新cache裡的資料。

> 解說

• useQuery :

  除了一般取得資料外，我們可以看到useQuery有更多不同的功能，這邊列舉出官方文件上的幾個功能：

  而我想特別針對幾個好用的功能做紀錄，也算是在專案上會比較常用的的功能。

  • cacheTime: number | Infinity

    是用來設定cache的時間，過了時間後就會刪除這筆資料。
    (Defaults to 5 * 60 * 1000 (5 minutes) or Infinity during SSR)

  • staleTime: number | Infinity

    是用來設定cache的時間，過了時間後，會自動重新請求API。