Вызовите мутацию GraphQL один раз после монтирования компонента React - PullRequest
Новая
       4

Вызовите мутацию GraphQL один раз после монтирования компонента React

0 голосов
/ 06 марта 2020

После того, как пользователь создает профиль, он получает в своем электронном письме ссылку, которая отправляет его обратно на сайт с verifyToken в URL. Если токен совпадает с токеном, хранящимся в базе данных, их статус isVerified сохраняется в базе данных со значением true.

new-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 , componentDidMount, et c. Моему разуму просто тяжело видеть это больше. У этой ссылки были одни из лучших решений, которые я нашел до сих пор, но я не мог понять, как их реализовать ... [Идея] Выполнить мутацию в mount # 1939

Любая помощь, чтобы указать мне в правильном направлении, будет очень признателен. Спасибо.

1 Ответ

0 голосов
/ 06 марта 2020

Это гораздо более простое приложение при использовании перехватчиков 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
    )
  }
}
...