Использование apollo / реагирует на вход в систему и не может получить токен

Question

Я пытался использовать useMutation для этого логина. js, но что-то не так. сначала я опечатываю пароль, получаю ошибку. и затем используйте правильный пароль (он должен перенаправить на дом и получить токен), он все еще застрял в логине. Даже если я использую компонент Mutation, у него все еще есть та же проблема. Может быть, что-то не так на useState или другом. Как я могу сделать этот код?

const Signin = props => {
    const [signinUser, {loading, error}] = useMutation(SIGNIN_USER)
    const [values, setValues] = useState({
        username: '',
        password: ''
    })

    const  { username, password } = values

    const handleChange = name => event => {
        setValues({...values, [name]: event.target.value})
    }

    const onSubmit = (e, signinUser) => {
        e.preventDefault()
        signinUser({
            variables: { username, password }
        }).then( async ({data}) => {
            console.log(data)
            localStorage.setItem('token', data.signinUser.token)
            await props.refetch()
            setValues({
                ...values,
                username: '',
                password: ''
            })
            props.history.push('/')
        }).catch(e => {
            console.log(e)
        })
    }

    const validateForm = () => {
        const isValidate = 
            !username || !password
        return isValidate
    }

    return (
        <div className='App'>
            <h2 className='App'>SignIn</h2>
            {loading && <div>Loading...</div>}
            <form 
                className='form' 
                onSubmit={(e) => onSubmit(e, signinUser)}
            >
                <input 
                    type='text' 
                    name='username' 
                    placeholder='Username' 
                    value={username}
                    onChange={handleChange('username')} 
                />
                <input 
                    type='password' 
                    name='password' 
                    placeholder='Password' 
                    value={password}
                    onChange={handleChange('password')} 
                />
                <button 
                    type='submit' 
                    className='button-primary'
                    disabled={loading || validateForm() || error}
                >
                    Submit
                </button>
                {error && <Error error={error}/>}
            </form>
        </div>
    )
}

Там, где источник работал отлично.

const initialState = {
  username: "",
  password: ""
};

class Signin extends React.Component {
  state = { ...initialState };

  clearState = () => {
    this.setState({ ...initialState });
  };

  handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (event, signinUser) => {
    event.preventDefault();
    signinUser().then(async ({ data }) => {
      // console.log(data);
      localStorage.setItem("token", data.signinUser.token);
      await this.props.refetch();
      this.clearState();
      this.props.history.push("/");
    });
  };

  validateForm = () => {
    const { username, password } = this.state;
    const isInvalid = !username || !password;
    return isInvalid;
  };

  render() {
    const { username, password } = this.state;

    return (
      <div className="App">
        <h2 className="App">Signin</h2>
        <Mutation mutation={SIGNIN_USER} variables={{ username, password }}>
          {(signinUser, { data, loading, error }) => {
            return (
              <form
                className="form"
                onSubmit={event => this.handleSubmit(event, signinUser)}
              >
                <input
                  type="text"
                  name="username"
                  placeholder="Username"
                  value={username}
                  onChange={this.handleChange}
                />
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  value={password}
                  onChange={this.handleChange}
                />
                <button
                  type="submit"
                  disabled={loading || this.validateForm()}
                  className="button-primary"
                >
                  Submit
                </button>
                {error && <Error error={error} />}
              </form>
            );
          }}
        </Mutation>
      </div>
    );
  }
}

Мой код

извините за мой бедный англ