Как я могу убедиться, что у меня есть данные перед монтированием компонентов?
Пользователь нажимает на ссылку, и клиент считывает токен с 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.info(res)
} catch (e) {
console.info(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
handleMutation не следует вызывать из рендера, вы можете использовать graphql HOC из react-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.info(res)
} catch (e) {
console.info(e)
}
// const token = res.data.signUp.token
// localStorage.setItem(AUTH_TOKEN, token)
// this.setState({ error: e.message })
// }
}
и вы также можете вызвать эту функцию из componentDidMount.
Надеюсь, это поможет
Спасибо, сэр. Это хорошо работает. Не могли бы вы подробнее рассказать, почему этого нельзя сделать с помощью Mutation renderprop и вызова handleMutation из render?
Менять response state из функции рендеринга - не лучшая идея, это снова вызовет функцию рендеринга. и Mutation render props предоставляет функцию mutation, которая должна запускаться через какое-то действие. Mutation - это то, что изменяет данные, и данные, в основном, обрабатываются в связи с каким-то событием.
вызов this.handleMutation во время рендеринга кажется мне странным. Обычно вы назначаете функцию мутации как обработчик отправки формы или обработчик кнопки onclick. Я предполагаю, что вызов его во время рендеринга - не лучший вариант. Я также не вижу необходимости копировать состояние в реквизиты.