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

您可以创建一个event handler并传递如下参数：

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能够使用then语法。

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
  );
})

React-Apollo突变数据之外的功能？

3 个答案: