将<Mutation>改成useMutation

Question

我有一个 removeUser 页面，我在其中使用 < Mutation >，然后我正在使用该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);                     };但是，我被建议useMutation改用。首先，我无法这样做，因为我收到了这样的错误：Unhandled Rejection (Error): GraphQL error: Variable `email` of type `String!` must not be null.即使突变有效，有什么方法可以在我的情况下修改和使用相同的函数进行错误处理？

Answer 1

没有理由再拥有一个RemoveUserMutation-removeUser已经在范围内，所以只需使用它。

function submitForm(email: string) {

  setIsSubmitted(true);

  removeUser({

    variables: {

      email,

    },

  })

  ...

}

您可以像这样继续使用您的submitForm功能：

onSubmit={e => {

  e.preventDefault();

  submitForm(email);

}}

这条线

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

不工作，因为没有todo变量。由于您使用 TypeScript，因此您应该为查询生成类型定义，然后将它们与钩子一起使用。这将防止这样的错误。