Update mutations

nawrotw · Jul 22, 2024 · a6d5557 · a6d5557
1 parent 9b1e4f2
commit a6d5557
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -84,6 +84,7 @@ function App() {
 
   const handleDelete = useCallback((todoId: number) => {
     deleteTodo(todoId);
+    resetEdit();
   }, [deleteTodo]);
 
   const handleSave = (id: number, text: string) => {

diff --git a/src/api/todos/useTodosMutation.ts b/src/api/todos/useTodosMutation.ts
@@ -1,13 +1,13 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { updateTodoCheck, clearCompleted as clearCompletedFn, addTodo, updateTodoText, deleteTodo } from "./fetchTodos.ts";
 import { Todo } from "./Todo.ts";
-import { getTodoFromCache, setTodoCache } from "../../utils/reactQueryUtils.ts";
+import { getTodoFromCache, updateCacheTodo } from "../../utils/reactQueryUtils.ts";
 
 export const useTodosMutation = () => {
   const queryClient = useQueryClient();
 
   const getTodo = (id: number) => getTodoFromCache(queryClient, id);
-  const setTodo = (todo: Todo) => setTodoCache(queryClient, todo);
+  const updateTodo = (todo: Todo) => updateCacheTodo(queryClient, todo);
 
   const addTodoMutation = useMutation({
     mutationFn: addTodo,
@@ -23,7 +23,7 @@ export const useTodosMutation = () => {
     // If the mutation fails,
     // use the context returned from onMutate to roll back
     onError: (_err, _newTodo, context) => {
-      context && queryClient.setQueryData(['todos'], context.previousTodos)
+      context && queryClient.setQueryData(['todos'], context.previousTodos);
     },
     // Always re-fetch after error or success:
     onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
@@ -42,7 +42,7 @@ export const useTodosMutation = () => {
     mutationFn: updateTodoText,
     onMutate: async ({ id, text }) => {
       await queryClient.cancelQueries({ queryKey: ['todos', id] });
-      setTodo({ ...getTodo(id), text: text });
+      updateTodo({ ...getTodo(id), text: text });
     },
     onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   });
@@ -51,9 +51,15 @@ export const useTodosMutation = () => {
     mutationFn: updateTodoCheck,
     onMutate: async ({ id, checked }) => {
       await queryClient.cancelQueries({ queryKey: ['todos', id] });
-      setTodo({ ...getTodo(id), checked: checked });
+      const prevTodo = getTodo(id);
+      updateTodo({ ...prevTodo, checked: checked });
+      return { prevTodo }
     },
-    onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+    onError: (_err, _newTodo, context) => {
+      context && updateTodo(context.prevTodo);
+    },
+    // do not re-fetch to preserve items order
+    // onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   });
 
   const clearCompletedMutate = useMutation({
@@ -68,9 +74,6 @@ export const useTodosMutation = () => {
     onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   });
 
-  addTodoMutation.error
-  addTodoMutation.reset
-
   return {
     addTodo: addTodoMutation.mutate,
     deleteTodo: deleteTodoMutation.mutate,

diff --git a/src/utils/reactQueryUtils.ts b/src/utils/reactQueryUtils.ts
@@ -1,7 +1,7 @@
 import { QueryClient } from "@tanstack/react-query";
 import { Todo } from "../api/todos/Todo.ts";
 
-export const setTodoCache = (queryClient: QueryClient, todo: Todo) => {
+export const updateCacheTodo = (queryClient: QueryClient, todo: Todo) => {
   queryClient.setQueryData<Todo[]>(['todos'], (old) => {
     if (!old) throw new Error(`Todos list is undefined. Should not happen`);
     const index = old?.findIndex(({id}) => id === todo.id);