Run a callback before the internal state of useMutation is updated.

[joeprivettsmart]

Problem:
In the useMutation hook the internal state is updated before onCompleted method is executed:
https://github.com/apollographql/apollo-client/blob/57e9dae68762be10087fbe310c00ff7e4d0f7259/src/react/hooks/useMutation.ts#L125

In React, when we need to re-direct to another page following a successful mutation result, the following code can be used:

const [mutateFunction, { loading }] = useMutation(SOME_MUTATION, {
  onCompleted: () => {
    redirectTo('/foo')
  },
});

However, the redirectTo method is called after the internal loading state of the useMutation hook is updated. This causes the host React Component to re-render before re-directing, showing a flash of undesired content on the screen before the new page is reached.

Solutions:
Introduce a beforeCompletes or onSuccess method. This is run before any internal state is updated. If it returns false, then it prevents any subsequent internal state update and does not execute onCompleted.

For example:

let onSuccessResult;
if (!error) {
  onSuccessResult = onSuccess?.(
    response.data!,
    clientOptions as MutationOptions<TData, OperationVariables>
  );
}

if (
  onSuccessResult !== false && 
  mutationId === ref.current.mutationId &&
  !clientOptions.ignoreResults
) {
  const result = {
    called: true,
    loading: false,
    data,
    error,
    client,
  };

  if (ref.current.isMounted && !equal(ref.current.result, result)) {
    setResult((ref.current.result = result));
  }
}

const onCompleted =
  executeOptions.onCompleted || ref.current.options?.onCompleted;

if (onSuccessResult !== false && !error) {
  onCompleted?.(
    response.data!,
    clientOptions as MutationOptions<TData, OperationVariables>
  );
}

return response;