时间戳

首页 > 解决方案 > 在 React 组件挂载后调用一次 GraphQL Mutation

reactjs - 在 React 组件挂载后调用一次 GraphQL Mutation

问题描述

用户创建个人资料后，他们会在电子邮件中收到一个链接，该链接会将他们发送回网址中包含的站点verifyToken。如果令牌与存储在数据库中的令牌匹配，则它们的isVerified状态将使用 value 存储在数据库中true。

新的profile.js

import VerifyEMail from '../components/VerifyEmail';

const NewProfilePage = props => (
  <div>
    <VerifyEMail verifyToken={props.query.verifyToken} />
  </div>
);

export default NewProfilePage;

目前，我已经实现并使用带有“验证”按钮的表单，用户必须单击该按钮才能调用 graphQL 突变，verifyEmail. 由于这会将isVerified值设置true为数据库中的值，因此我知道一切正常。

../components/VerifyEmail.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';

const VERIFY_EMAIL_MUTATION = gql`
  mutation VERIFY_EMAIL_MUTATION($verifyToken: String!) {
    verifyEmail(verifyToken: $verifyToken) {
      isVerified
    }
  }
`;

class VerifyEmail extends Component {
  render() {
    const { verifyToken } = this.props;
    return (
      <Mutation mutation={VERIFY_EMAIL_MUTATION} variables={{ verifyToken }}>
        {verifyEmail => (
          <form
            onSubmit={async () => {
              await verifyEmail(verifyToken);
            }}
          >
            <button type="submit">Verify</button>
          </form>
        )}
      </Mutation>
    );
  }
}

VerifyEmail.propTypes = {
  verifyToken: PropTypes.string.isRequired,
};

export default VerifyEmail;

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

我已经看到了一些使用React hooks、Apollo hooks、 componentDidMount 等的解决方案。我的脑子只是很难再看到它了。这个链接有一些迄今为止我发现的最好的解决方案，但我不知道如何实现它们...... [功能理念] 在安装 #1939 上执行突变

任何帮助我指出正确方向的帮助将不胜感激。谢谢你。

标签： reactjsgraphqlapolloreact-apollo

解决方案

当使用 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>}
    </>
  )
}

如果您想继续使用类，唯一的解决方案是创建一个组件并componentDidMount为此目的使用该组件。

// 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
    )
  }
}

推荐阅读