// src/App.jsx
import { useQuery } from "@tanstack/react-query";

function JokeList() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ["jokes"],
    queryFn: () =>
      fetch("https://official-joke-api.appspot.com/jokes/ten").then((r) => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Something went wrong.</p>;

  return (
    <ul>
      {data.map((joke) => (
        <li key={joke.id}>{joke.setup}</li>
      ))}
    </ul>
  );
}

function App() {
  return <JokeList />;
}

export default App;

/*
  Notes:
  - useQuery handles the entire loading/error/success cycle — no
    useState or useEffect written by hand anywhere in this component.
  - queryFn is just a function returning a Promise; useQuery calls it
    and manages everything else around that call.
*/