函数外的 React-Apollo 突变数据？

Posted 2023-03-10

【中文标题】函数外的 React-Apollo 突变数据？

【英文标题】：React-Apollo mutation data outside the function?

【发布时间】：2019-10-24 04:12:32

【问题描述】：

我有以下突变

<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 对象是未定义的，我该如何传递这些数据或制作它在突变功能之外可用吗？或者也许通过道具传递它们？

【参考方案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>
  )

【讨论】：

如果我这样做，它会是同样的事情。此外，如果我 console.log 它，数据将是未定义的

【参考方案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 语法。

【参考方案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
  );
)