在页面加载时触发 React Apollo 突变

Question

我正在尝试在 react-apollo 应用程序中实施电子邮件验证系统，运行成为一个问题。问题是当用户访问带有验证令牌的 link 时，我想在页面加载时触发 GraphQL 突变。目前突变是在单击按钮时触发的，但我希望它在页面加载时发生。

我尝试 return 来自 render 的突变，但它使应用程序进入无限循环。

return (
            <Mutation
              mutation={VERIFY_EMAIL_MUTATION}
              variables={{ id }}
              onCompleted={() => this.setState({ userVerified: true })}
            >
              {(verifyEmail, { loading, error }) => {
                 verifyEmail();
            }
            </Mutation>

如何实现在页面加载时触发此变更？

Answer 1

使用 compose 并将其作为函数传递给您的组件。以下方法允许您传递多个 mutations/queries，您可以在没有和有触发器的情况下使用它们 where-ever。

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);

Answer 2

你可以这样做而不是撰写

 useEffect(() => {
        MutationName({
            variables: {
                variable1: variable1Value
            }
        });
    }, []);

useEffect 的行为与页面加载时相同。

在页面加载时触发 React Apollo 突变

Firing React Apollo mutation on page load

reactjs

react-apollo