onCompleted and onError not working with mutation

Hey, great library.

I’m trying to catch mutation errors but it seems none of the callbacks are called. The only way I was able to catch errors is to use errorPolicy: “ignore” and then checking the result in refetchQueries callback.

Is it an error or am I doing something wrong?

addUser = useMutation(mutation, {
    update: (proxy, mutationResult) => {
       /* NOT CALLED */
    },
    refetchQueries: (result) => {
      /* CALLED ON errorPolicy: "ignore" */
    },
    onCompleted: (data) => {
       /* NOT CALLED */
    },
    onError: (data) => {
       /* NOT CALLED */
    }
  });

[zebapy]

I needed this and loading so I made a wrapper hook. To those who may find it useful:

import { useState } from 'react';
import { useMutation as useHookMutation } from 'react-apollo-hooks';

export function useMutation(
  mutation,
  { onCompleted, onError, ...options } = {}
) {
  const [loading, setLoading] = useState(false);
  const [called, setCalled] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const mutate = useHookMutation(mutation, options);

  const handler = async (...args) => {
    setLoading(true);
    setCalled(true);
    setError(null);
    setData(null);

    try {
      const { data } = await mutate(...args);

      setData(data);

      setLoading(false);

      if (onCompleted) {
        onCompleted(data);
      }

      return { data };
    } catch (e) {
      setLoading(false);
      setError(e);

      if (onError) {
        onError(e);
      }
    }
  };

  return [
    handler,
    {
      loading,
      called,
      error,
      data
    }
  ];
}

[trojanowski]

Hi @shlomokraus

Right now you can use only the mutation options supported directly by apollo-client. onCompleted and onError are react-apollo specific. You can have a similar result with something like that:

const addUser = useMutation(mutation);

const myHandler = () => {
  addUser().then(
    result => {
      // success callback
    },
    error => {
      // error callback
   }
  );
}

Or with async/await syntax:

const addUser = useMutation(mutation);

async function myHandler() {
  let result;
  try {
    result = await addUser();
  } catch (error) {
    // error handler
  }
}

And then:

<button onClick={myHandler}>Add user</button>