updatequery react query
// MyForm.js
import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { useMutation } from 'react-query';
import axios from 'axios';
const MyForm = () => {
// Define your form schema using Yup
const validationSchema = Yup.object({
name: Yup.string().required('Required'),
email: Yup.string().email('Invalid email address').required('Required'),
});
// Define the mutation for posting data
const mutation = useMutation((newData) => {
return axios.post('https://example.com/api/data', newData);
});
return (
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
mutation.mutate(values, {
onSuccess: () => {
setSubmitting(false);
alert('Data posted successfully!');
},
onError: (error) => {
setSubmitting(false);
alert('Error posting data: ' + error.message);
},
});
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="name">Name</label>
<Field name="name" type="text" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field name="email" type="email" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
);
};
export default MyForm;
Comments
Post a Comment