Измените <Mutation>на useMutation - PullRequest
Новая
       13

Измените <Mutation>на useMutation

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

У меня есть страница removeUser, где я использую , а затем я выполняю обработку ошибок с помощью функции submitForm(). Этот код работал отлично: 

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved ,setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  function StatusMessage(){
    if (isRemoved){
      return (
      <CustomAlert severity='success' text='User Removed'></CustomAlert>
        )
      }
   //else...
  }

  function submitForm(RemoveUserMutation: any, email: string) {
    setIsSubmitted(true);
      RemoveUserMutation({
        variables: {
            email: email,
        },
    }).then(({ data }: any) => {
      setIsRemoved(true);
    })
    .catch((error: { message: string; }) => {
      setIsRemoved(false);
      console.log("Error msg:" + error.message);
      setErrorMessage(error.message)
    })
  }

  return (
    <Mutation mutation={RemoveUserMutation}
    >
      {(RemoveUserMutation: any) => (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}
      >
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched
          } = props;
          const change = (name: string, e: any) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);           
          };
          return (
            <div className='main-content'>
              <form style={{ width: '100%' }}
               onSubmit={e => {e.preventDefault();
                submitForm(RemoveUserMutation, email)}}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <br></br>
                  <Button
                  type="submit"
                  disabled={!isValid || !email}
                  >
                    Remove User</Button>
                </div>
              </form>
              <br></br>
              {isSubmitted && StatusMessage()}
            </div>
          )
        }}
      </Formik>
    </div>
      )}
     </Mutation>
  );
}

Однако мне предложили использовать useMutation. Во-первых, я не могу этого сделать, так как получаю такие ошибки: 

Unhandled Rejection (Error): GraphQL error: Variable `email` of type `String!` must not be null.

И даже если мутация работает, есть ли способ, как я могу изменить и использовать ту же функцию для обработки ошибок в моем случае?

Это то, что я пытался сейчас, но это не работает: 

export default function RemoveUserPage() {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isRemoved ,setIsRemoved] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [removeUser] = useMutation(RemoveUserMutation);

  function StatusMessage(){
    if (isRemoved){
      return (
      <CustomAlert severity='success' text='User Removed'></CustomAlert>
        )
      }
  }

  function submitForm(RemoveUserMutation: any, email: string) {
    setIsSubmitted(true);
      RemoveUserMutation({
        variables: {
            email: email,
        },
    }).then(({ data }: any) => {
      setIsRemoved(true);
    })
    .catch((error: { message: string; }) => {
      setIsRemoved(false);
      setErrorMessage(error.message)
    })
  }

  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <Formik
        initialValues={{ email: '' }}
        onSubmit={(values, actions) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            actions.setSubmitting(false);
          }, 1000);
        }}
        validationSchema={schema}
      >
        {props => {
          const {
            values: { email },
            errors,
            touched,
            handleChange,
            isValid,
            setFieldTouched
          } = props;
          const change = (name: string, e: any) => {
            e.persist();
            handleChange(e);
            setFieldTouched(name, true, false);           
          };
          return (
            <div className='main-content'>
              <form style={{ width: '100%' }}
               onSubmit={e => {e.preventDefault();
                removeUser({variables: {todo: email }});}}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <br></br>
                  <Button
                  type="submit"
                  disabled={!isValid || !email}
                  >
                    Remove User</Button>
                </div>
              </form>
              <br></br>
              {isSubmitted && StatusMessage()}
            </div>
          )
        }}
      </Formik>
    </div>
  );
}

1 Ответ

1 голос
/ 21 марта 2020

Нет смысла иметь RemoveUserMutation больше - removeUser уже находится в области видимости, поэтому просто используйте его. 

function submitForm(email: string) {
  setIsSubmitted(true);
  removeUser({
    variables: {
      email,
    },
  })
  ...
}

Вы можете продолжать использовать свою функцию submitForm, как эта : 

onSubmit={e => {
  e.preventDefault();
  submitForm(email);
}}

Эта строка 

removeUser({variables: {todo: email }})

не работает, потому что нет переменной todo. Поскольку вы используете TypeScript, вы должны сгенерировать определения типов для ваших запросов, а затем использовать их с хуками. Это предотвратит такие ошибки.

...