函数外的反应-阿波罗突变数据

Question

我有以下突变

<Mutation mutation={LOGIN}>
    { (login, {data,loading,error}) => {
        if(loading)  return(<h1> Loading... </h1>);
        return(
            <button onClick={
                e => {
                e.preventDefault();
                    login({
                        variables: {
                            email: this.state.email,
                            password: this.state.password
                        }
                    }).then(() => this.context.login(
                        data.login.token, 
                        data.login.userId, 
                        data.login.tokenExpiration))
                }}>
                Login
            </button>
        );
    }}
</Mutation>

你可以看到，我调用登录方法onClick，在我使用.then块后，但是，它会抛出一个错误，因为上面突变data对象是未定义的，我如何传递这些数据或使其在突变函数之外可用？或者也许通过道具传递它们？

Answer 1

您可以创建一个事件处理程序并传递如下参数：

handleClick(event, login , data) {
    event.preventDefault();
    login({
       variables: {
          email: this.state.email,
          password: this.state.password
       }
    }).then(() => this.context.login(
      data.login.token, 
      data.login.userId, 
      data.login.tokenExpiration
    ))
}
...
render() {
  return(
    <Mutation mutation={LOGIN}>
    { (login, {loading,error,data}) => {
        if(loading)  return(<h1> Loading... </h1>);
        if(error) return(<p>{`Error : ${error}`}</p>);
        return(
         <button onClick={e => this.handleClick(e, login, data)}>
           Login
         </button>
        );
    }}
    </Mutation>
  )
}

Answer 2

为什么不使用三元运算符来显示存在的数据？

<Mutation mutation={LOGIN}>
    { (login, {data,loading,error}) => {
        if(loading)  return(<h1> Loading... </h1>);
        return(
            <button onClick={
                e => {
                e.preventDefault();
                    login({
                        variables: {
                            email: this.state.email,
                            password: this.state.password
                        }
                    })
                       {data && () => this.context.login(
                        data.login.token, 
                        data.login.userId, 
                        data.login.tokenExpiration) }
                }}>
                Login
            </button>
        );
    }}
</Mutation>

也许在您的情况下，您不应该使用突变组件，而应该使用 graphql hoc 来使用当时的语法。

Answer 3

默认情况下，突变的响应在突变承诺中返回，因此您可以使用它，而不是尝试在突变结果中使用data。

login({
  variables: {
    email: this.state.email,
    password: this.state.password
  }
}).then(response => {
  this.context.login(
    response.data.login.token, 
    response.data.login.userId, 
    response.data.login.tokenExpiration
  );
})