React Query 是一個強大的數據同步庫，用于在 React 應用中處理數據獲取、緩存、同步以及更新。與傳統的 React 狀態管理解決方案（如 Redux）相比，React Query 提供了一種更簡單、更有效的方式來處理遠程數據。 ### 主要特性： 1. **自動重試：**數據獲取失敗時自動重試。 2. **緩存和自動失效：**對數據進行緩存，并在需要時自動失效，例如重新獲取數據。 3. **后臺數據同步：**即使數據在后臺，也可以配置應用以繼續獲取數據。 4. **查詢折疊：**自動將同時發生的多個相同查詢合并為單個網絡請求。 5. **突變（Mutations）：**處理數據創建、更新和刪除等操作并重新獲取相關數據。 6. **分頁和無限滾動：**提供了鉤子和工具來幫助實現分頁和無限滾動行為。 7. **開箱即用的開發者工具：**易于調試和觀察數據查詢的狀態。 ### 基本使用： 1. **安裝：** 使用 NPM 或 Yarn 安裝 React Query。 ~~~ 1npm install react-query 2# 或 3yarn add react-query ~~~ 2. **設置 React Query 提供者（Provider）：** 通常在應用的最頂層添加 `QueryClientProvider` 并傳遞一個 `QueryClient` 實例。 ~~~ 1import { QueryClient, QueryClientProvider } from 'react-query'; 2 3const queryClient = new QueryClient(); 4 5function App() { 6 return ( 7 <QueryClientProvider client={queryClient}> 8 {/* 應用的其他部分 */} 9 </QueryClientProvider> 10 ); 11} ~~~ 3. **數據獲取：** 在組件中使用 `useQuery` 鉤子來獲取數據。 ~~~ 1import { useQuery } from 'react-query'; 2 3function Todos() { 4 const { isLoading, error, data } = useQuery('todos', fetchTodos); 5 6 if (isLoading) return 'Loading...'; 7 if (error) return 'An error has occurred: ' + error.message; 8 9 return ( 10 <ul> 11 {data.map(todo => ( 12 <li key={todo.id}>{todo.title}</li> 13 ))} 14 </ul> 15 ); 16} 17 18async function fetchTodos() { 19 const response = await fetch('/api/todos'); 20 return response.json(); 21} ~~~ `useQuery` 的第一個參數是這個查詢的唯一鍵，可以是字符串或數組。 第二個參數是一個返回Promise的函數，它負責實際的數據獲取。 4. **執行突變：** 使用 `useMutation` 鉤子來執行數據創建、更新或刪除操作。 ~~~ 1import { useMutation, useQueryClient } from 'react-query'; 2 3function AddTodo() { 4 const queryClient = useQueryClient(); 5 const mutation = useMutation(addTodo, { 6 onSuccess: () => { 7 // 重新獲取todos查詢的數據 8 queryClient.invalidateQueries('todos'); 9 }, 10 }); 11 12 function handleAddTodo() { 13 mutation.mutate({ title: 'Do laundry' }); 14 } 15 16 return ( 17 <button onClick={handleAddTodo}> 18 {mutation.isLoading ? 'Adding...' : 'Add Todo'} 19 </button> 20 ); 21} 22 23async function addTodo(todo) { 24 const response = await fetch('/api/todos', { 25 method: 'POST', 26 body: JSON.stringify(todo), 27 }); 28 return response.json(); 29} ~~~ `useMutation` 的第一個參數是執行突變的函數，第二個參數是一個包含各種事件回調的對象（例如 `onSuccess` 或 `onError`）。 這些是 React Query 的基礎使用案例。對于更復雜的功能，如數據預取、Webpack 模塊聯邦中的共享緩存等，React Query 提供了豐富的 API 和鉤子來幫助你完成任務。建議查看官方文檔以了解更詳盡的用法和配置選項。