Optimistic Patterns with React Query and Zustand

React Query's useMutation hook provides built-in infrastructure for optimistic updates through three lifecycle callbacks: onMutate (fires before the mutation, return a context object), onError (fires on failure, receives the context), and onSettled (fires on success or failure). This structure is designed specifically for optimistic patterns.

In onMutate, you perform three steps: first, cancel any in-flight queries for the affected data (await queryClient.cancelQueries({ queryKey })), then snapshot the current cache (queryClient.getQueryData(queryKey)), and finally apply the optimistic update to the cache (queryClient.setQueryData(queryKey, updater)). Return the snapshot as context.