React-Apollo данные мутации вне функции? - PullRequest
Новая
       9

React-Apollo данные мутации вне функции?

0 голосов
/ 09 июня 2019

У меня есть следующая мутация 

<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 объект изуказанная выше мутация не определена, как я могу передать эти данные или сделать их доступными вне функции мутации?Или, может быть, передать их через реквизит?

Ответы [ 3 ]

0 голосов
/ 11 июня 2019

Почему бы вам просто не использовать троичный оператор для отображения данных, когда они существуют? 

<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.

0 голосов
/ 14 июня 2019

По умолчанию ответ мутации возвращается в обещании мутации, поэтому вы можете использовать его вместо попытки использовать 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
  );
})
0 голосов
/ 09 июня 2019

Вы можете создать обработчик событий и передавать аргументы следующим образом: 

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