資料取得

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query"
import { fetchEmployees } from "./api"
import { EmployeeListView, ErrorView, LoadingView } from "./view"

// 快取已取得資料的容器（整個應用程式一個）
const queryClient = new QueryClient()

function EmployeeList() {
  const { data, isPending, error } = useQuery({
    queryKey: ["employees"],
    queryFn: fetchEmployees,
  })

  if (isPending) return <LoadingView />
  if (error) return <ErrorView message={error.message} />

  return <EmployeeListView employees={data} />
}

export default function App() {
  return (
    // 用 QueryClientProvider 包住整個應用程式，裡面就能使用 useQuery
    <QueryClientProvider client={queryClient}>
      <EmployeeList />
    </QueryClientProvider>
  )
}