데이터 가져오기

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>
  )
}