React Query useQuery：資料獲取革新與實用技巧

React Query 變革：useQuery 鉤子的革新與實踐

在前端開發的世界裡，資料獲取與狀態管理是不可或缺的環節。React Query (或稱 TanStack Query) 作為一個強大的工具，它讓你在 React 應用程式中輕鬆地處理非同步資料，提供快取、同步和更新伺服器狀態的能力。而其中，useQuery 鉤子是 React Query 裡最核心的功能之一，它簡化了資料的獲取過程。

事件開頭短結論： React Query 的 useQuery 鉤子是資料獲取的關鍵，它像一把瑞士刀，幫助前端工程師更有效率地處理資料，但隨著版本更新，其使用方式也經歷了變革。

什麼是 useQuery？

useQuery 是一個自訂的 React 鉤子，用於在你的 React 應用程式中獲取資料。 它需要兩個主要參數：

• key (鍵)： 是一個獨特的字串或陣列，用於標識你的查詢。它幫助 React Query 內部進行資料快取、重新獲取和共享。
• queryFn (查詢函式)： 是一個函式，負責獲取資料。這可以是任何基於 Promise 的方法，包括 GET 和 POST 請求。

使用 useQuery，你可以輕鬆地從伺服器獲取資料，並將其與 UI 連結。當元件渲染時，useQuery 返回一個包含資料、狀態、錯誤和其他有用資訊的物件。

事件重點： useQuery 鉤子的核心功能是資料獲取，它簡化了非同步操作，並提供了快取和狀態管理功能。

useQuery 的回傳值

useQuery 回傳的物件包含幾個重要的屬性，讓你在渲染 UI 時能根據查詢的狀態做出正確的反應。以下是一些關鍵的屬性：

• data: 查詢成功後回傳的資料。
• status: 查詢的狀態，可能是 idle、pending (loading)、error 或 success。
• isPending: 查詢是否正在進行中 (loading)。
• isError: 查詢是否發生錯誤。
• error: 如果查詢失敗，則包含錯誤的資訊。

根據這些屬性，你可以建構出具有彈性的 UI，例如，在資料載入時顯示 loading 提示，在發生錯誤時顯示錯誤訊息，在資料成功獲取時顯示資料。

個人心得： 使用 useQuery 能夠更有效地處理資料獲取，簡化程式碼，並且更容易進行狀態管理。

實用案例：GET 和 POST

儘管 useQuery 常用於 GET 請求，但它也可以用於 POST 請求。這使得你可以使用相同的機制來獲取資料，即使你需要將資料傳送到伺服器。

深入了解狀態

除了主要的狀態之外，React Query 還提供了更細緻的資訊，例如 fetchStatus 屬性，它描述了資料獲取的方式，可能的值有：fetching、paused、stale 和 idle。瞭解這些狀態可以讓你更精確地控制 UI 的行為，例如，你可以使用 fetchStatus 來區分正在背景重新獲取資料和首次獲取資料。

結論

React Query 的 useQuery 鉤子提供了一個簡潔而強大的方式來處理資料獲取。透過理解其基本概念、狀態和回傳值，你可以建立更有效率、更易於維護的前端應用程式。

參考閱讀

• https://tanstack.com/query/v5/docs/framework/react/reference/useQuery
• https://tanstack.com/query/v5/docs/react/reference/useQuery
• https://www.apollographql.com/docs/react/data/queries
• https://medium.com/@bhairabpatra.iitd/usequery-hook-in-react-b06ef604ea46