diff --git a/src/App.tsx b/src/App.tsx index 589cf77..f8f8b7e 100644 --- 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 index 1f4cd71..0cd870a 100644 --- 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 index ed5f658..ad3486f 100644 --- 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(['todos'], (old) => { if (!old) throw new Error(`Todos list is undefined. Should not happen`); const index = old?.findIndex(({id}) => id === todo.id);