If the mutation is not successful, I want to show the user a message.
Code:
function submitForm(RemoveUserMutation: any) {
const { email} = state;
if(email){
RemoveUserMutation({
variables: {
email: email,
},
}).then(({ data }: any) => {
console.log('info: ', data.deleteUser);
})
.catch(console.log)
}
}
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);
setState( prevState => ({ ...prevState, [name]: e.target.value }));
};
return (
<div className='main-content'>
<form style={{ width: '100%' }}
onSubmit={e => {e.preventDefault();
submitForm(RemoveUserMutation)}}>
<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}
style={{
background: '#6c74cc',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
}}
>
Remove User</Button>
</div>
</form>
</div>
)
}}
</Formik>
</div>
)}
</Mutation>
);
}
Fow now, I tried to print it on console but I get an error on onCompleted that:
Type 'void' is not assignable to type '((data: any) => void) | undefined'.ts(2322)
I tried this too but doesn't really help since idk how to show the user a message that the mutation is successful or not. It could be a typography too, or alert.
onCompleted= {(e: any) => setStatus(true)}