Fetching data with TanStack Query (the real app behind the video)

npm install
npm run dev        # http://localhost:5173

The same profile picker as the fetch-race video, now with TanStack Query. Click Alice, then quickly Bob: Bob stays, because Alice's late answer is stored under her own query key. Click Alice again: her card shows at once from the cache while a background refetch runs. Open DevTools › Network (Fetch/XHR) to watch the requests, and the TanStack Query DevTools (the floating button, bottom right) to see one cache entry per key.

• vite.config.js serves a tiny API, GET /api/users/:id, from api/users.json. Alice's answer is delayed by 2 s on purpose (everyone else: 0.4 s), so the race happens every time. Real networks do this at random.
• src/main.jsx creates one QueryClient and wraps the app in QueryClientProvider (plus ReactQueryDevtools, which is only bundled in development).
• src/versions/ holds each step of the story (see its README). src/Profile.jsx is whichever version was copied in last (the finished app: useQuery with signal).

Sources: TanStack Query · Query keys · Important defaults · Query cancellation