Paths/Frontend Engineer/State & Data Fetching / Server State
Invalidate After a Mutation
A write makes a cached read wrong. Write the mutation and the invalidation that follows it.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/api/mutations.ts exists○
- The file defines the cancel mutation○
- The mutation invalidates the affected queries when it succeeds○
02Walkthrough
1 of 3 revealed- 01
Write the mutation
The mutation is the write - and the place where the cache starts lying about the world.
echo 'export const cancelOrder = {\n mutationFn: async (orderId: string) => {\n const response = await fetch("/api/orders/" + orderId + "/cancel", { method: "POST" });\n if (!response.ok) throw new Error("cancel failed");\n return orderId;\n },' > ~/frontend/src/api/mutations.ts - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list