React · Exercise 6 of 6 Previous
Advanced
Todos with TanStack Query
The starter already lists todos with useQuery (key ["todos"]). Add a todo form: an input id="new-todo" and a button id="add".
Use useMutation with api.addTodo as the mutation function. When it succeeds, invalidate the ["todos"] query so the list refetches, and clear the input.
While the mutation is running, the button is disabled and says Adding....
What Check tests
- The list loads with 2 todos
- There is an input
#new-todoand a button#add - While saving,
#addis disabled and saysAdding... - After saving, the list refetches and shows 3 todos
- The list was fetched again (2 GET requests) and the input was cleared
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.