React Query：setQueryData 與 setQueriesData 應用指南

React Query 深入探討：setQueryData 與 setQueriesData 的應用

事件開頭短結論

React Query 提供了強大的工具來管理你的前端資料。其中，setQueryData 和 setQueriesData 是兩個重要的函數，用於即時更新快取中的資料。然而，它們之間存在一些差異，理解這些差異有助於你更有效地使用 React Query。

事件重點

1. setQueryData 的基本用法

   setQueryData 是一個同步函數，用於立即更新單一查詢的快取資料。如果你已經同步地獲取了資料，可以使用這個函數來更新快取。

   queryClient.setQueryData(queryKey, newData);
   

   重要提醒： 更新資料時，請確保以不可變的方式進行。不要直接修改現有的資料，而是返回一個新的物件或陣列。

2. setQueriesData 的多重更新

   如果你需要一次更新多個查詢的資料，或者需要部分匹配查詢鍵（query key），那麼 setQueriesData 是更好的選擇。它允許你使用過濾器函數或部分匹配查詢鍵來更新多個查詢。

   queryClient.setQueriesData(
     { queryKey: ['posts', 1] },
     (oldData) => {
       // ... 根據舊資料計算新資料
       return newData;
     }
   );
   

3. 不可變性的重要性

   無論是使用 setQueryData 還是 setQueriesData，都要確保以不可變的方式更新資料。這意味著，你應該創建新的物件或陣列，而不是直接修改現有的資料。

4. setQueryData 與 onSuccess

   在 React Query v4 中，setQueryData 不再觸發 onSuccess 回調。如果你需要在資料更新後執行某些操作，可以使用 useEffect 來監聽資料的變化。

   const { data } = useQuery(queryKey);
   
   useEffect(() => {
     //  當資料變化時，執行此操作
   }, [data]);
   

個人心得

React Query 是一個功能強大的函式庫，可以幫助你有效地管理前端資料。setQueryData 和 setQueriesData 是其中兩個非常有用的函數。

在使用 setQueryData 時，要注意資料的不可變性，以及在 v4 版本中不再觸發 onSuccess 回調。如果需要更新多個查詢，或者想要部分匹配查詢鍵，請使用 setQueriesData。

透過正確的使用這些函數，你可以更有效地在 React 應用程式中管理資料，並提升使用者體驗。

參考閱讀

• https://tanstack.com/query/v5/docs/reference/QueryClient
• https://stackoverflow.com/questions/77781413/queryclient-setquerydata-updating-issues-and-inconsistences-in-next-js-applica
• https://tanstack.com/query/v3/docs/framework/react/reference/QueryClient
• https://forum.codewithmosh.com/t/queryclient-setquerydata/21541