Invariant Violation setting state in Apollo mutate

Question

I'm calling a mutate function from an event handler and getting an Invariant Violation error when I try to use this.setState in the catch clause.

saveToken({data}){
  let {userId, token, expires} = data.login;
  storeLoginToken(userId, token, expires);
  history.push('/dogs');
}
setErrors(error){
  this.setState('error', error.graphQLErrors);
}
handleSubmit(event) {
  event.preventDefault();
  let {email, password} = this.state;
  let {history} = this.props;
  let clientKey = getClientKey();
  this.props.mutate({ variables: { email, password, clientKey } })
    .then(this.saveToken.bind(this))
    .catch(this.setErrors.bind(this))
}

Answer 1

I think the problem is that you missed the opening and closing brackets inside the setState function.

I would write it like this:

class ClassName extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        error,
        ...
      };
      
      this.saveToken = this.saveToken.bind(this);
      this.setErrors = this.setErrors.bind(this)
    }

    ...

    setErrors(error) {
      this.setState({error: error.graphQLErrors}); // should work with brackets
    }
    
  handleSubmit(event) {
    event.preventDefault();
    let { email, password } = this.state;
    let { history } = this.props;
    let clientKey = getClientKey();
    this.props.mutate({
        variables: {
          email,
          password,
          clientKey
        }
      })
      .then(this.saveToken)
      .catch(this.setErrors)
  }

}