Mutation

Author: Chaffychaf007

src/App.tsx

@@ -1,9 +1,15 @@
 import "./App.css";
-import PostList from "./react-query/PostList";
+import TodoForm from "./react-query/TodoForm";
 import TodoList from "./react-query/TodoList";
 
+
 function App() {
-  return <PostList />;
+  return (
+    <>
+  <TodoForm />
+  <TodoList />
+  </>
+  )
 }
 
 export default App;

src/react-query/TodoForm.tsx

@@ -1,17 +1,51 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
+import { Todo } from './hooks/useTodos';
+import axios from 'axios';
 
 const TodoForm = () => {
-  const ref = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
+  const addTodo = useMutation<Todo, Error, Todo>({
+    mutationFn: (todo: Todo) =>
+      axios
+        .post<Todo>('https://jsonplaceholder.typicode.com/todos', todo)
+        .then(res => res.data),
+    onSuccess: (savedTodo, newTodo) => {
+      // queryClient.invalidateQueries({
+      //   queryKey: ['todos']
+      // })
+        queryClient.setQueryData<Todo[]>(['todos'], todos => [savedTodo, ...(todos || [])]);
 
+        if(ref.current) ref.current.value = '';
+    }
+  });
+  const ref = useRef<HTMLInputElement>(null);
   return (
-    <form className="row mb-3">
+    <>
+    { addTodo.error && <div className="alert alert-danger">
+      {addTodo.error.message}
+    </div> }
+    <form className="row mb-3" onSubmit={event => {
+      event.preventDefault();
+
+      if(ref.current && ref.current.value)
+      addTodo.mutate({
+        id: 0,
+        title: ref.current?.value,
+        completed: false,
+        userId: 1
+      })
+    }}>
       <div className="col">
         <input ref={ref} type="text" className="form-control" />
       </div>
       <div className="col">
-        <button className="btn btn-primary">Add</button>
+        <button className="btn btn-primary" disabled={addTodo.isLoading}>
+          {addTodo.isLoading ? 'Adding...' : 'Add'}
+        </button>
       </div>
     </form>
+    </>
   );
 };
 

src/react-query/hooks/useTodos.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
-interface Todo {
+export interface Todo {
     id: number;
     title: string;
     userId: number;