react-apollo-hooks

Does onCompleted works with useMutation?


I am using useMutation hook in react project. The mutation runs successfully but it's not reaching onCompleted afterwards.

I have set notifyOnNetworkStatusChange to true in the mutation but that doesn't seem to help.

const [createUser] = useMutation(SIGNUP_MUTATION);

createUser({
  variables: {
     firstname,
     lastname,
     email
  },
  notifyOnNetworkStatusChange: true,
  onCompleted: (data) => {
     // not called
     confirm(data);
  }
});

Solution

  • Looking at the api of useMutation it seems like you're using onCompleted in the wrong place. it should be part of the useMutation definition.

      const [createUser] = useMutation(
        SIGNUP_MUTATION,
        {
          onCompleted(data) {
            confirm(data);
          }
        }
      );
    
      return (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              createUser({ variables: { firstname, lastname, email } }); // assuming `firstname`, `lastname` and `email` are defined somewhere.
            }}
          >
            <input type="text" />
            <button type="submit">Signup</button>
          </form>
        </div>
      );