【React 學習筆記 EP.25】Query

什麼是 Query？

React Query 是一套專門幫你在 React 應用程式中「管理伺服器資料」的工具庫。

Query 概念

1. Query：向伺服器拿資料的動作，例如讀取一份使用者清單。
2. Query Key：每筆查詢的唯一識別 key，React Query 用它來辨識和快取不同的資料。
3. 快取：React Query 會把拿回來的資料暫時存起來，下次需要時可以先使用快取資料，不一定每次都重新跟伺服器要。

Query 語法

1. queryKey：一個陣列，用來唯一識別這筆查詢，例如 ['users']。不同的 key 代表不同的資料。
2. queryFn：一個函式，負責實際去伺服器拿資料，通常會用 fetch 發送 HTTP 請求。
3. data：伺服器回傳的資料，成功取得後可以直接使用。
4. isLoading：布林值，告訴你資料是否還在載入中，方便顯示「載入中…」的畫面。
5. error：如果請求失敗，這裡會存放錯誤資訊。

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'

const queryClient = new QueryClient() // 建立一個查詢客戶端實例

function Users() {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['users'], // 設定查詢鍵，辨識這筆資料
    queryFn: async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/users')

      if (!res.ok) {
        throw new Error('取得使用者資料失敗')
      }

      return res.json()
    },
  })

  if (isLoading) return <p>載入中...</p> // 資料載入中時顯示提示

  if (isError) return <p>發生錯誤：{error.message}</p>

  return (
    <ul>
      {data.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  )
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 在最外層提供查詢環境 */}
      <Users />
    </QueryClientProvider>
  )
}