optimistic-ui-react-query-general-usage.js

useMutation(yourMutationFunction, {
  // Before the mutation starts
  async onMutate() {
    /* 1. Stop the queries that may affect this operation */
    /* 2. Modify cache to reflect this optimistic update */
    /* 3. Return a snapshot so we can rollback in case of failure */

    const context = { ... }
    return context
  },

  // Mutation throws an error
  onError(error, newItem, context) {
    /* Rollback the changes using the snapshot */
  },

  // After mutation ends successfully
  onSuccess() {
    /* Refetch or invalidate related queries */
  }
})