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

// Simulates a slow network, same idea as Intermediate Ch6 Challenge 2.
function fakeFetchUser(id) {
  const delay = id === "1" ? 1500 : 200; // id "1" resolves much slower
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id, name: `User ${id}` }), delay);
  });
}

function UserDisplay({ userId }) {
  const { data, isLoading } = useQuery({
    queryKey: ["user", userId], // userId is part of the key
    queryFn: () => fakeFetchUser(userId),
  });

  if (isLoading) return <p>Loading...</p>;
  return <p>{data.name}</p>;
}

function App() {
  const [userId, setUserId] = useState("1");

  return (
    <div>
      <button onClick={() => setUserId("1")}>Show User 1 (slow)</button>
      <button onClick={() => setUserId("2")}>Show User 2 (fast)</button>
      <UserDisplay userId={userId} />
    </div>
  );
}

export default App;

/*
  Notes:
  - Clicking User 1 then quickly User 2 no longer produces the
    stale-overwrite bug from Ch6 Challenge 2 — each id has its own
    cache entry under ["user", "1"] and ["user", "2"], so User 1's
    slow response arriving late updates ONLY the "1" cache entry, not
    whatever is currently being displayed for "2".
  - No ignore flag or cleanup function was written by hand anywhere —
    queryKey including userId is the entire fix.
*/