Reactjs 在安装React组件后调用GraphQL变异一次

用户创建配置文件后，他们会在电子邮件中收到一个链接，该链接会将他们发送回url中带有

verifyToken

的站点。如果令牌与存储在数据库中的令牌匹配，则其

已验证

状态将以值

true

存储在数据库中

new profile.js

从“../components/VerifyEMail”导入VerifyEMail；
const NewProfilePage=props=>(
);
导出默认的NewProfile页面；

目前，我已经使用一个带有“验证”按钮的表单实现了这个功能，用户必须单击该按钮才能调用graphQL变体，

verifyEmail

。由于这将数据库中的

isVerified

值设置为

true

，因此我知道一切都正常工作

。/components/VerifyEmail.js

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'react apollo'导入{突变}；
从“graphql标签”导入gql；
const VERIFY\u EMAIL\u MUTATION=gql`
变异验证\电子邮件\变异（$verifyToken:String！）{
verifyEmail（verifyToken:$verifyToken）{
已验证
}
}
`;
类验证电子邮件扩展组件{
render（）{
const{verifyToken}=this.props；
返回(
{verifyEmail=>(
{
等待verifyEmail（verifyToken）；
}}
>
验证
)}
);
}
}
VerifyEmail.propTypes={
verifyToken:PropTypes.string.isRequired，
};
导出默认验证电子邮件；

然而，我真的不想强迫我的用户点击按钮来触发变异。我希望在组件加载后调用它。我已经为此绞尽脑汁一天半了，尝试了很多东西，但似乎找不到任何有效的方法

我已经看到了一些使用、componentDidMount等的解决方案。我的脑子里再也看不清了。这个链接有一些到目前为止我找到的最好的解决方案，但我不知道如何实现它们。。。

---

如果能帮我指出正确的方向，我将不胜感激。谢谢。

使用React钩子时，这是一个简单得多的应用程序：

import React, { useEffect } from "react";

function VerifyEmail({ verifyToken }) {
  const [ verifyEmail, { loading, data, error }] = useMutation(VERIFY_EMAIL_MUTATION);
  useEffect(() => {
    verifyEmail({
      variables: { verifyToken },
    });
  }, []);
  return (
    <>
      {loading && <p>Loading...</p>}
      {data && <p>Verified successfully!</p>}
      {error && <p>Error!</p>}
    </>
  )
}

---

这成功了！非常感谢。我曾在函数组件中尝试过几次使用useffect（）钩子，但现在我发现我用错了。我想我需要多学一点。如果这对其他人有帮助，您可能需要在答案中添加一件事，那就是从“react apollo”导入{UseMartation}。这是我采取的另一条路线，但不太确定如何实施。我想最后，我试图让它变得比需要的更复杂。再次感谢。

// Current component:
<Mutation mutation={VERIFY_EMAIL_MUTATION} variables={{ verifyToken }}>
  {verifyEmail => (
    <SendEmail token={verifyToken} verify={verifyEmail} />
  )}
</Mutation>

// Send Email component
class SendEmail extends Component {
  componentDidMount() {
    const { token, verify } = this.props;
    verify(token);
  }
  render() {
    return (
      //handle loading, data and error states
    )
  }
}