将<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) {&nbsp; setIsSubmitted(true);&nbsp; removeUser({&nbsp; &nbsp; variables: {&nbsp; &nbsp; &nbsp; email,&nbsp; &nbsp; },&nbsp; })&nbsp; ...}您可以像这样继续使用您的submitForm功能：onSubmit={e => {&nbsp; e.preventDefault();&nbsp; submitForm(email);}}这条线removeUser({variables: {todo: email }})不工作，因为没有todo变量。由于您使用 TypeScript，因此您应该为查询生成类型定义，然后将它们与钩子一起使用。这将防止这样的错误。