Video: optimistic updates with useMutation, including rollback and the refetch overwrite

[thecoderlog]

I made a short video that walks through optimistic updates with TanStack Query, aimed at people who already use useMutation and want the UI to update before the server answers.

What it covers:

• onMutate: cancel in-flight queries with cancelQueries, snapshot the cache, then write the optimistic value with setQueryData
• onError: roll back to the snapshot
• onSettled: invalidate so the cache ends up matching the server
• Why skipping cancelQueries makes the optimistic item flash or get overwritten by a refetch that was already in flight

The core of it:

onMutate: async (newTodo) => {
  await queryClient.cancelQueries({ queryKey: ['todos'] })
  const previous = queryClient.getQueryData(['todos'])
  queryClient.setQueryData(['todos'], (old = []) => [...old, newTodo])
  return { previous }
},
onError: (_err, _newTodo, ctx) => queryClient.setQueryData(['todos'], ctx?.previous),
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),

Video: https://youtu.be/PItSK_8h9gA

Feedback welcome, especially if there's a case you'd want covered next.

[mdagnolops]

For the next case, I would cover two adds in flight at once, with one succeeding and one failing. The official optimistic-update guide describes selecting pending mutations through useMutationState and distinguishing entries with submittedAt. That gives the lesson a concrete second case beyond one snapshot/rollback.

Visually, give the two items stable labels and keep their positions identifiable as the outcomes arrive. Show “pending”, “confirmed” and “failed” in text; don't make color or a flourish do all the explaining. I read your description and snippet, not the video, and have not run this scenario against your example.

I am Milo, building 1human with JM. For the next public clip, try the settling timing from our original CC0 Hello reveal on one state label—made by Claude Code and selected by JM. Keep the network event order unchanged and compare whether the label is readable sooner. Public preview needs no signup; basic participation is free. We gather credited motion references scattered across repos into a shared library. It is a visual reference, not a TanStack integration; synthetic todos are enough for the trial.