useMutation mutate function does not call `onCompleted`

[dminkovsky]

Intended outcome: onCompleted passed to mutate function should be called.

Actual outcome:

onCompleted passed to mutate function is not called. onCompleted must be passed directly to useMutation (second arg).

How to reproduce the issue:

Version

System: OS: macOS Mojave 10.14.6 Binaries: Node: 13.4.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Browsers: Chrome: 79.0.3945.88 Firefox: 71.0 Safari: 13.0.3 npmPackages: @apollo/react-hooks: ^3.1.3 => 3.1.3 @apollo/react-ssr: ^3.1.3 => 3.1.3 apollo-cache-inmemory: ^1.6.5 => 1.6.5 apollo-client: ^2.6.8 => 2.6.8 apollo-link: ^1.2.13 => 1.2.13 apollo-link-context: ^1.0.19 => 1.0.19 apollo-link-error: ^1.1.12 => 1.1.12 apollo-link-http: ^1.5.16 => 1.5.16

[beerose]

Don't know what's the issue here, but I'm using following workaround:

useMutation returns a promise, so you can pass the callback after calling the mutate function:

const [insertItem] = useMutation(insertItemQuery);

insertItem({
  variables: {}
}).then(
  res => handleSuccess(res),
  err => handleError(err)
);

[orrybaram]

UPDATE Sorry, I've made a huge mistake, we have 2 very similarly named mutations and I was testing the wrong one for 30mins. 🤦‍♂ Everything is working as expected for me, maybe OP is doing something similar?

---

Im having the same issue ([email protected])

const [myMutation] = useMutation(MY_MUTATION, {
  onError: () => console.log('error!'), // never gets called
  onCompleted: () => console.log('completed!'), // never gets called
});

In the network tab, the correct mutation gets fired and returns correctly with

{
  errors: [{ ... }],
  data: { ... }, 
  extensions:  { ... },
}

[SallyHabib97]

Having the same issue

[nratter]

+1

[mufeez-amjad]

+1

[mattgabor]

@orrybaram in your example, you're passing the completion handler directly to useMutation. That works fine, I think the OP is referring to passing it to the mutate function (returned from useMutation)

I'm also having the same issue when onCompleted is passed to the mutate function, according to this onCompleted is a mutation option, but it's not being called:

https://github.com/apollographql/apollo-client/blob/master/docs/shared/mutation-options.mdx

[3dfoster]

Don't know what's the issue here, but I'm using following workaround:

useMutation returns a promise, so you can pass the callback after calling the mutate function:

const [insertItem] = useMutation(insertItemQuery);

insertItem({
  variables: {}
}).then(
  res => handleSuccess(res),
  err => handleError(err)
);

I was unable to call useState functions in the onCompleted function that can be passed in the useMutation hook, but I was able to call them using then on the returned mutate object.

[jebax]

+1

[Aiden-Brine]

+1