loginHandle.js

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import Login from './Component/index';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { useMutation, gql } from '@apollo/react-hooks';

export default () => {
  const history = useHistory();
  const [loginData, setLoginData] = useState({
    email: '',
    password: '',
  });

  const LOGIN_USER = gql`
    mutation LoginUser($email: String!, $password: String!) {
      login(email: $email, password: $password) {
        token
        refreshToken
        username
        id
        message
      }
    }
  `;

  const validationSchema = Yup.object({
    email: Yup.string()
      .email('Invalid email address')
      .required('No email provided'),
    password: Yup.string()
      .min(8, 'Password is too short - should be 8 chars minimum')
      .required('No password provided'),
  });

  const [loginUser, { loading }] = useMutation(LOGIN_USER, {
    update(_, result) {
      console.log(result);
      history.push('/');
    },
    onError(err) {
      console.log(err);
    },
    onCompleted({ login }) {
      localStorage.setItem('token', login.token);
    },
    variables: { email: loginData.email, password: loginData.password },
  });

  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    onSubmit: async (values) => {
      setLoginData({
        email: values.email,
        password: values.password,
      });
      loginUser();
    },
    validationSchema,
  });

  return (
    <>
      <Login
        loginValue={formik.values}
        loginError={formik.errors}
        loginTouch={formik.touched}
        loginSubmitHandler={formik.handleSubmit}
        loginChangeHandler={formik.handleChange}
        loginBlurHandler={formik.handleBlur}
        loginSubmitting={formik.isSubmitting}
        loading={loading}
      />
    </>
  );
};