新反应 - 阿波罗版本未引发突变

自从我最近迁移到新的react-apollo版本后，我的LoginPage组件出现了问题 .

我已经集成了变异组件，将电子邮件和密码发布到我的graphql服务器，该服务器返回令牌和用户信息 .

这是突变：

const LOGIN_MUTATION = gql`
  mutation loginMutation($email: String!, $password: String!) {
    loginUser(email: $email, password: $password) {
      token
      user {
        id
        firstName
        lastName
      }
    }
  }
`;

我不明白为什么当我想提交信息并运行变异时会出现此错误：

Uncaught (in promise) TypeError: Object(...)(...).subscribe is not a function

这是我的LoginPage组件：

class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      firstName: "",
      lastName: ""
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    const { firstName, lastName, email, password } = this.state;
    return (
        <div>
          <Mutation mutation={LOGIN_MUTATION} variables={{email: email, password: password }}>
            {(loginMutation, { loading, error, data }) => (
              <div>
                <LoginForm
                  onSubmit={loginMutation}
                  onChange={this.handleInputChange}
                />
              </div>
            )}
          </Mutation>
        </div>
    );
  }

这是我的LoginForm组件：

class LoginForm extends Component {
  render() {
    return (
      <div>
        <Card>
          <div>
            <div>
              <TextField
                name="email"
                floatingLabelText="Email"
                type="text"
                onChange={this.props.onChange}
              />
            </div>
            <div>
              <TextField
                name="password"
                floatingLabelText="Mot de passe"
                type="password"
                onChange={this.props.onChange}
              />
            </div>
            <CardActions>
              <div>
                <RaisedButton
                  label="Se connecter"
                  primary={true}
                  type="submit"
                  onClick={this.props.onSubmit}
                  fullWidth
                />
              </div>
            </CardActions>
          </div>
        </Card>
      </div>
    );
  }
}

export default LoginForm;

谢谢您的帮助 .