Confirmation of mutation callback behavior

useMutationtypescript

Prefacing this with the understanding that what I'm doing is probably an anti-pattern. If it is, that's good to know!

I have the following setup where I basically wrap a 3rd party mutation hook in another mutation. General reason for this is because the 3rd party (which is actually myself working on a separate module) doesn't expose the mutation options in any way, due to some social constraints that I'd rather not go into at the moment

function useThirdPartyMutation() {
  const mutation = useMutation({
    mutationFn: ...,
    onSuccess: async () => {
      console.log("third party on success")
    },
  )

  // Only returns subset of the mutation fields, which is kind of an unfortunate decision, but not really relevant to my question, I think...
  return { ... }
} 

// In my app...

function SomeComponent() {
  const thirdPartyMutation = useThirdPartyMutation()

  const myWrapperMutation = useMutation({
    mutationFn: async () => {
      return thirdPartyMutation.mutateAsync()
    },
    onSuccess: async () => {
      console.log("wrapper on success")
    }),
    // Other options that explain why this wrapper is being used
    ...
  })
}

function useThirdPartyMutation() {
  const mutation = useMutation({
    mutationFn: ...,
    onSuccess: async () => {
      console.log("third party on success")
    },
  )

  // Only returns subset of the mutation fields, which is kind of an unfortunate decision, but not really relevant to my question, I think...
  return { ... }
} 

// In my app...

function SomeComponent() {
  const thirdPartyMutation = useThirdPartyMutation()

  const myWrapperMutation = useMutation({
    mutationFn: async () => {
      return thirdPartyMutation.mutateAsync()
    },
    onSuccess: async () => {
      console.log("wrapper on success")
    }),
    // Other options that explain why this wrapper is being used
    ...
  })
}

Main question is when I call

mutate()

mutate()

mutateAsync()

mutateAsync()

myWrapperMutation

myWrapperMutation

, does the

onSuccess

onSuccess

from

useThirdPartyMutation

useThirdPartyMutation

run at all? (assuming its mutation fn succeeds)

My understanding is that it should but seeing some behavior where I have an odd feeling that it isn't. Otherwise maybe I'm running into some race condition caused by some user error or another culprit

TanStack•2mo ago•

3 replies

hidden-sapphire

Confirmation of mutation callback behavior

useMutationtypescript

function useThirdPartyMutation() {
  const mutation = useMutation({
    mutationFn: ...,
    onSuccess: async () => {
      console.log("third party on success")
    },
  )

  // Only returns subset of the mutation fields, which is kind of an unfortunate decision, but not really relevant to my question, I think...
  return { ... }
} 

// In my app...

function SomeComponent() {
  const thirdPartyMutation = useThirdPartyMutation()

  const myWrapperMutation = useMutation({
    mutationFn: async () => {
      return thirdPartyMutation.mutateAsync()
    },
    onSuccess: async () => {
      console.log("wrapper on success")
    }),
    // Other options that explain why this wrapper is being used
    ...
  })
}

function useThirdPartyMutation() {
  const mutation = useMutation({
    mutationFn: ...,
    onSuccess: async () => {
      console.log("third party on success")
    },
  )

  // Only returns subset of the mutation fields, which is kind of an unfortunate decision, but not really relevant to my question, I think...
  return { ... }
} 

// In my app...

function SomeComponent() {
  const thirdPartyMutation = useThirdPartyMutation()

  const myWrapperMutation = useMutation({
    mutationFn: async () => {
      return thirdPartyMutation.mutateAsync()
    },
    onSuccess: async () => {
      console.log("wrapper on success")
    }),
    // Other options that explain why this wrapper is being used
    ...
  })
}

Main question is when I call

mutate()

mutate()

mutateAsync()

mutateAsync()

myWrapperMutation

myWrapperMutation

, does the

onSuccess

onSuccess

from

useThirdPartyMutation

useThirdPartyMutation

Confirmation of mutation callback behavior

Similar Threads

Confirmation of mutation callback behavior

Similar Threads

Similar Threads

Similar Threads