Как я могу убедиться, что у меня есть данные перед монтированием компонентов? - PullRequest
Новая
       22

Как я могу убедиться, что у меня есть данные перед монтированием компонентов?

0 голосов
/ 23 октября 2018

Пользователь нажимает на ссылку, а клиент читает токен из URL.Затем токен передается мутации signup.На бэкэнде у меня есть этот токен, сохраненный для пользователя, чтобы я мог запросить и найти этого пользователя.Проблема в том, что я получаю сообщение об ошибке на стороне клиента GraphQL error: No user found.Я предполагаю, что токен не передается мутации signup(shortLivedToken: String), поэтому я не могу запросить пользователя на бэкенде.На детской площадке graphql все работает как положено.Я знаю, что получаю токен из URL, потому что он находится в props.match.params.token Вот мой компонент SignUp внешнего интерфейса: 

class SignUp extends Component {
  constructor(props) {
    super(props)
    this.state = { shortLivedToken: props.match.params.token }
  }

  handleMutation = async mutation => {
    try {
      const res = await mutation()
      console.log(res)
    } catch (e) {
      console.log(e)
    }
    // const token = res.data.signUp.token
    // localStorage.setItem(AUTH_TOKEN, token)
    // this.setState({ error: e.message })
    // }
  }

  render() {
    return (
      <Mutation
        mutation={SIGN_UP}
        variables={{ shortLivedToken: this.state.shortLivedToken }}
      >
        {(mutation, { data, loading, error }) => {
          if (loading)
            return (
              <Pane
                display="flex"
                alignItems="center"
                // justifyContent="center"
                height={400}
              >
                <Spinner />
              </Pane>
            )
          if (error)
            return (
              <Pane
                display="flex"
                alignItems="center"
                justifyContent="center"
                height={400}
              >
                <p>{this.props.match.params.token}</p>
                <Text>Error occurred {error.message}</Text>
              </Pane>
            )
          this.handleMutation(mutation)
          return null
        }}
      </Mutation>
    )
  }
}

1 Ответ

0 голосов
/ 23 октября 2018

handleMutation не следует вызывать из рендера, вы можете использовать graphql HOC из Reaction-Apollo и получить мутацию в props и использовать ее в методе жизненного цикла реагирования для извлечения данных. 

graphql(SIGN_UP, {
  name: 'signUp'
})(SignUp)

componentDidMount () {
  this.props.signUp({
    variables: {
      shortLivedToken: this.props.match.params.token
    }
  })
}

Ваша handleMutation функция должна быть такой, как указано ниже: 

handleMutation = async mutation => {
try {
  const res = await mutation({variables: this.props.match.params.token})
  console.log(res)
} catch (e) {
  console.log(e)
}
// const token = res.data.signUp.token
// localStorage.setItem(AUTH_TOKEN, token)
// this.setState({ error: e.message })
// }

}

, и вы можете также вызывать эту функцию с componentDidMount.

Надеюсь, что этопоможет

...