FormData from Form in mutation!

I have a form in React App and use React Query for mutation data in this array of posts:

const POSTS = [
  { id: 1, title: "Green Olly", author: "Garry Molland" },
  { id: 2, title: "Fargus the Greatest", author: "Mazzy Fazzy" },
];

I want to send new post information from the HTML form with the new title and author.

<form >
        <div className="block">
          <label htmlFor="title">Title</label>
          <input name="title" id="title" type="text"></input>
        </div>
        <div className="block">
          <label htmlFor="author">Author</label>
          <input name="author" id="author" type="text"></input>
        </div>
        <button type="submit" >AddNew</button>
      </form>

1.Add onSubmit handler for Form

 <form onSubmit={(e)=> {
        e.preventDefault();
        newPostMutation.mutate(new FormData(e.target));
        }}>

We create new FormData object with From data and prevent Form's standard "action".

2.In our newPostMutation we use useMutation hook because of mutation of the original array of Posts.

const newPostMutation = useMutation({
    mutationKey: ["addNewPost"],
// key - a unique name for this particular mutation
    mutationFn: async (postFromForm) => {
      const newPost = Object.fromEntries(postFromForm);
      return await wait(1000).then(()=> POSTS.push({id: crypto.randomUUID(), title: newPost.title, author: newPost.author}))},
      onSuccess: () => {
        qClient.invalidateQueries(["posts"]);
      }
  })

postFromForm parameter in async gets new FormData(e.target), then we use Object.fromEntries()transforms a list of key-value pairs into an object. Then we use newPost object to add its properties to pushing object to the Posts array.

wait(1000) function for simulation API work

Blog

FormData from Form in mutation!

GenIl

Join Our Newsletter. No Spam, Only the good stuff.

Related