How to use the @apollo/react-hooks.useMutation function in @apollo/react-hooks

const LoginForm = ({ history, loading: authLoading }) => {
  const client = useApolloClient()

  const [login, { error, loading }] = useMutation(LOGIN_MUTATION, {
    onCompleted: data => {
      setCookie(data.login.token)

      // Force a reload of all current queries now that user is
      // logged in
      client.cache.reset().then(() => {
        history.push('/home')
      })
    },
    onError: err => console.error(err)
  })

  if (loading || authLoading) {
    return 
  }

export const useDelete2 = (options) => {
  const { collectionName, collection } = extractCollectionInfo(options);
  const { fragmentName, fragment } = extractFragmentInfo(options, collectionName);
  const typeName = collection.options.typeName;
  const {
    //input: optionsInput,
    //_id: optionsId,
    mutationOptions = {},
  } = options;

  const query = buildDeleteQuery({
    fragment,
    fragmentName, typeName
  });

  const [deleteFunc, ...rest] = useMutation(query, {
    // optimistic update
    update: multiQueryUpdater({ collection, typeName, fragment, fragmentName }),
    ...mutationOptions
  });
  const extendedDeleteFunc = (args/*{ input: argsInput, _id: argsId }*/) => {
    return deleteFunc({
      variables: {
        ...computeQueryVariables(options, args)
      }
    });
  };
  return [extendedDeleteFunc, ...rest];
};

const NotificationCard: React.FC = ({ notificationId, avatar, resourceId, handle, type, time }) => {

  const { theme } = useContext(AppContext);
  const { navigate } = useNavigation();
  const notificationText = NotificationText[type];
  const { readableTime } = parseTimeElapsed(time);

  const [deleteNotification, { loading: deleteNotificationLoading, called: deleteNotificationCalled }] = useMutation(MUTATION_DELETE_NOTIFICATION);

  const swipeableRef = useRef();

  const navigateAction = () => {
    if (resourceId === '') return;

    if (type === NotificationType.FOLLOW) {
      navigate(Routes.ProfileViewScreen, { userId: resourceId });
    } else if (type === NotificationType.LIKE || type === NotificationType.COMMENT) {
      navigate(Routes.PostViewScreen, { postId: resourceId });
    }
  };

  const onDelete = () => {
    if (!deleteNotificationLoading && !deleteNotificationCalled) {
      // @ts-ignore

const LoginScreen = props => {
  //const [showToast, setShowToast] = useState(false);
  const [login, { ...mutationResult }] = useMutation(LOGIN_MUTATION);

  async function formSubmit(values) {
    const { data } = await login({
      variables: {
        email: values.email,
        password: values.password,
      },
    });
    const user = data.login;
    props.setCurrentUser(user);
    props.navigation.navigate('Home');
  }

  if (mutationResult.loading) return ;
  if (mutationResult.error) {
    Toast.show({

enableContainerLimits: useRef(null),
      max: useRef(null),
      default: useRef(null),
      defaultRequest: useRef(null),
    },
  };
  useEffect(() => {
    const element = formValues.name.current;
    setImmediate(() => {
      if (element && typeof element.focus === 'function') element.focus();
    });
  }, [formValues.name]);

  const [createNamespaceMutation] = useMutation(CREATE_NAMESPACE);
  const [createLimitRangeMutation] = useMutation(CREATE_LIMIT_RANGE);
  const [createResourceQuotaMutation] = useMutation(CREATE_RESOURCE_QUOTA);

  function handleLabelsChanged(newLabels) {
    setLabels(newLabels);
  }

  function handleIstioChange(disableSidecar) {
    const [istioInjLabelKey, istioInjLabelValue] = ISTIO_INJECTION_LABEL.split(
      '=',
    );

    if (disableSidecar) {
      setReadonlyLabels({
        ...readonlyLabels,
        [istioInjLabelKey]: istioInjLabelValue,
      });
    } else {

itemId,
  titleModalVisible,
  setTitleModalVisible,
  setAddingToDashboard,
  finalVizState,
  setTitle,
  finalTitle
}) => {
  const [addDashboardItem] = useMutation(CREATE_DASHBOARD_ITEM, {
    refetchQueries: [
      {
        query: GET_DASHBOARD_ITEMS
      }
    ]
  });
  const [updateDashboardItem] = useMutation(UPDATE_DASHBOARD_ITEM, {
    refetchQueries: [
      {
        query: GET_DASHBOARD_ITEMS
      }
    ]
  });

  return (
     {
        setTitleModalVisible(false);
        setAddingToDashboard(true);

const AdminDashboard = ({ me, history }) => {
  const classes = useStyles();
  const apolloClient = useApolloClient();
  const [signOut, { loading, error }] = useMutation(SIGN_OUT_MUTATION, {
    onCompleted: data => {
      apolloClient.clearStore().then(() => history.push('/'));
    },
  });
  const { name, avatar, manageableCompetitions, importableCompetitions } = me;

  return (
    
      
        
          
        
        
          Hello, {name}!

const Application = ({ channelId, guildId }: Props & RouteComponentProps) => {
  const [updateUserStatus] = useMutation(UPDATE_USER_STATUS)

  const updateStatus = () => {
    if (!document.hidden && document.visibilityState === 'visible' && navigator.onLine) {
      return updateUserStatus({ variables: { lastSeen: dayjs().toISOString() } })
    }
  }

  useEffect(() => {
    document.addEventListener('visibilitychange', updateStatus)
    return () => document.removeEventListener('visibilitychange', updateStatus)
  }, [updateStatus])

  useEffect(() => {
    const interval = setInterval(updateStatus, 30000)
    return () => clearInterval(interval)
  }, [])

function WithProduct(props) {
    const { history } = props;
    const [cloneProducts] = useMutation(CLONE_PRODUCTS);
    const [createProductVariant] = useMutation(CREATE_VARIANT);

    return (
       {
          await handleArchiveProduct(product);
          history.push(redirectUrl);
        }}
        onCloneProduct={async (product) => {
          const opaqueProductIds = await getOpaqueIds([{ namespace: "Product", id: product }]);
          const [opaqueShopId] = await getOpaqueIds([{ namespace: "Shop", id: Reaction.getShopId() }]);

          try {
            await cloneProducts({ variables: { input: { shopId: opaqueShopId, productIds: opaqueProductIds } } });
            Alerts.toast(i18next.t("productDetailEdit.cloneProductSuccess"), "success");
          } catch (error) {
            Alerts.toast(i18next.t("productDetailEdit.cloneProductFail", { err: error }), "error");

const { user, updateUser: updateUserContext, theme } = useContext(AppContext);

  const [editableAvatar, setEditableAvatar] = useState('');
  const [editableName, setEditableName] = useState('');
  const [editableHandle, setEditableHandle] = useState('');
  const [handleError, setHandleError] = useState('');
  const [editableAbout, setEditableAbout] = useState('');
  const [isUploading, setIsUploading] = useState(false);

  const [queryIsHandleAvailable, {
    loading: isHandleAvailableLoading,
    called: isHandleAvailableCalled,
    data: isHandleAvailableData
  }] = useLazyQuery(QUERY_HANDLE_AVAILABLE);

  const [updateUser] = useMutation(MUTATION_UPDATE_USER);

  useEffect(() => {
    setEditableAvatar(avatar);
    setEditableName(name);
    setEditableHandle(handle);
    setEditableAbout(about);
  }, []);

  useEffect(() => {
    queryIsHandleAvailable({
      variables: {
        userId: user.id,
        handle: editableHandle
      }
    });
  }, [editableHandle]);