npm install
npm run dev # http://localhost:5173The profile picker from the TanStack Query video, now with a small form under the card. Type a new city for Alice
(Mumbai), press Save: the change goes to the server with useMutation. With invalidateQueries in onSuccess,
the card refetches and shows the new city; without it, the save works but the card keeps showing the old one until
something else refetches it. Open DevTools › Network (Fetch/XHR) to watch the PATCH and the GET after it, and the
TanStack Query DevTools (the floating button, bottom right) to see the query go to "fetching" and the mutation succeed.
vite.config.jsserves a tiny API fromapi/users.json:GET /api/users/:id(Alice is delayed 2 s on purpose, everyone else 0.4 s) andPATCH /api/users/:id(0.6 s), which merges the JSON body into that user and answers with the updated user. The changes live in memory: restarting the dev server puts everyone back (the file is never written).src/main.jsxcreates oneQueryClientand wraps the app inQueryClientProvider(plusReactQueryDevtools).src/versions/holds each step of the story (see its README).src/Profile.jsxis whichever version was copied in last (the finished app:useMutation+invalidateQueries).
Sources: Mutations · Invalidations from mutations · Query invalidation