Запуск мутации React Apollo при загрузке страницы
Я пытаюсь внедрить систему проверки электронной почты в приложении react-apollo и столкнулся с проблемой. Проблема в том, что я хочу запускать мутацию GraphQL при загрузке страницы, когда пользователь посещает ссылку с токеном проверки. В настоящее время мутация запускается при нажатии кнопки, но я хочу, чтобы это произошло при загрузке страницы.
Я попытался вернуть мутацию из render, но это отправило приложение в бесконечный цикл.
return (
<Mutation
mutation = {VERIFY_EMAIL_MUTATION}
variables = {{ id }}
onCompleted = {() => this.setState({ userVerified: true })}
>
{(verifyEmail, { loading, error }) => {
verifyEmail();
}
</Mutation>
Как я могу реализовать запуск этой мутации при загрузке страницы?
Ответы 2
Используйте compose и передайте его как функцию вашему компоненту. Следующий метод позволяет вам передавать несколько мутаций/запросов, вы можете использовать их где угодно без триггеров и с ними.
import React from "react";
import { compose, graphql } from "react-apollo";
import {
VERIFY_EMAIL_MUTATION
} from "../GraphqlQueries/ServerQueries";
class YourComponent extends React.Component {
componentWillMount() {
this.props.verifyEmail({variables: {email: "your_email", variable2: "variable2" }});
}
render() {
return (
<React.Fragment>
Your Render
</React.Fragment>
);
}
}
export default compose(
graphql(VERIFY_EMAIL_MUTATION, {
name: "verifyEmail"
})
)(YourComponent);
compose() больше не доступен в react-apollo 3. Некоторые решения здесь stackoverflow.com/questions/57445294/…
Вместо того, чтобы сочинять, вы можете сделать это так
useEffect(() => {
MutationName({
variables: {
variable1: variable1Value
}
});
}, []);
useEffect ведет себя как при загрузке страницы.
Рассмотрите возможность использования функций graphql() и compose() reac-apollo вместо компонента Mutation или Query Component. Посмотрите их здесь