[TOC] > [home](https://tanstack.com/) ## 概述 React Query 是一個強大的數據獲取庫，用于在 React 應用中輕松管理異步數據。它幫助你更好地處理數據的獲取、緩存、同步、更新等工作，減少了手動管理狀態的復雜度。以下是 React Query 的基礎使用教程。 ## 安裝 ``` npm install @tanstack/react-query ``` ## 語法 React Query 的核心功能是通過 useQuery 鉤子來獲取異步數據。useQuery 需要兩個參數： ``` 參數: queryKey：唯一的查詢鍵（通常是 URL 或 API 路徑） queryFn：返回一個 Promise 的異步函數 返回參數: isLoading: 是否正在加載數據 isError: 是否發生了錯誤 data: 成功獲取的數據 error: 錯誤信息 isFetching: 數據是否正在后臺重新獲取 ``` ## 示例 ### 初始化 初始化 ``` import React from 'react'; import ReactDOM from 'react-dom'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import App from './App'; // 創建一個 React Query 客戶端 const queryClient = new QueryClient(); ReactDOM.render( <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>, document.getElementById('root') ); ``` 使用 ``` import React from 'react'; import { useQuery } from '@tanstack/react-query'; // 異步獲取數據的函數 const fetchData = async () => { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }; const App = () => { // 使用 useQuery 鉤子 const { data, error, isLoading, isError } = useQuery(['data'], fetchData); if (isLoading) return <div>Loading...</div>; if (isError) return <div>Error: {error.message}</div>; return ( <div> <h1>Data:</h1> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); }; export default App; ``` ### 設置定時 ``` const { data, isLoading } = useQuery(['data'], fetchData, { staleTime: 60000, // 數據 60 秒內不會重新獲取 }); ``` ### 緩存 ``` // 獲取所有用戶 const { data, isLoading } = useQuery(['users'], fetchUsers); // 獲取特定用戶的信息 const { data, isLoading } = useQuery(['user', userId], fetchUserById); ``` > 這樣，React Query 會根據不同的查詢鍵來緩存和管理數據。