DEV Community

GenIl
GenIl

Posted on

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" },
];
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

1.Add onSubmit handler for Form

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

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"]);
      }
  })
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)