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.