give useMutation 's onSuccess access to variables

[franleplant]

Hi Tanner! Thanks a lot for this awesome library.

I find a potential improvement for this lib, when using useMutation only the fetcher has access to the dynamic variables object and for example when trying to update the queryCache in the onSuccess it sounds common enough to have access to those variables i.e. the id of the entity being mutated, right now I am patching it up but I guess this might be something useful to be in the lib.

This mostly takes effect when you try to build a custom hook to encapsulate all the logic of a particular mutation.

Example

export function useUpdateSomeEntity() {
  // store arguments to use in `onSucess`
  let variables
  return useMutation(_variables => {
      // store arguments to use in `onSucess`
      variables = _variables
      const url = `entity/${variables.id}`
      const body = { variables.entity }
      return fetch(url, { method: 'PUT', body })
    },
    {
      onSuccess: () => {
        // we have a single cache to store a list of Some Entities
        queryCache.setQueryData(['SomeEntities'], entities => {
          // here is a typical use case for accessing variables inside `onSuccess`
          entities[variables.id] = variables.entity
        }
      }
    }
  )
}

If we would add variables as the second onSuccess param then we can remove the _variables hack:

export function useUpdateSomeEntity() {
  return useMutation(variables => {
      const url = `entity/${variables.id}`
      const body = { variables.entity }
      return fetch(url, { method: 'PUT', body })
    },
    {
      onSuccess: (mutationResponse, variables) => {
        // we have a single cache to store a list of Some Entities
        queryCache.setQueryData(['SomeEntities'], entities => {
          // here is a typical use case for accessing variables inside `onSuccess`
          entities[variables.id] = variables.entity
        }
      }
    }
  )
}

What do you think? The same could probably be argued for onError and the other onHandlers. Does the lib has the necessary infra to do this? I might be able to help.

Edit: by the look of it, it should be trivial to make this change https://github.com/tannerlinsley/react-query/blob/master/src/useMutation.js#L82

If you agree I can create a PR

Thanks!

Fran

[tannerlinsley]

Yep! You can tack it on as the second (third for onSettled) argument for all three handlers in a PR. Good idea!

[franleplant]

I created a PR good sir 🎩

[buiducnhat]

Great, it still works at 2023. Thank you!