Data fetching

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

// The cache that remembers fetched data (one per app)
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 (
    // Wrap the whole app in QueryClientProvider to use useQuery inside it
    <QueryClientProvider client={queryClient}>
      <EmployeeList />
    </QueryClientProvider>
  )
}