UI doesn't re-render after mutation
for some reason the UI doesn't re-render after I make a mutation such as update or delete despite the data does change when I use watch
const [todos, setTodos] = useState(useTodoStore);
//watch todos
useEffect(() => {
console.log("todos", todos);
}, [todos]);
function getTodos() {
return Promise.resolve(todos);
}
function updateTodo(todo: any) {
todo.completed = !todo.completed;
const newTodos = todos.map((t: any) => (t.id === todo.id ? todo : t));
setTodos(newTodos);
return Promise.resolve(todo);
}
function deleteTodo(id: number) {
const newTodos = todos.filter((todo: any) => todo.id !== id);
setTodos(newTodos);
return Promise.resolve({});
}
const { data, isLoading, isError } = useQuery({
queryKey: ["todos"],
queryFn: getTodos,
});
const updateMutation = useMutation({
mutationFn: (newTodo) => {
return updateTodo(newTodo);
},
onSuccess: (newTodo) => {
queryClient.invalidateQueries(["todos"]);
},
});
const deleteMutation = useMutation({
mutationFn: (todo: any) => {
return deleteTodo(todo.id);
},
onSuccess: (id) => {
queryClient.invalidateQueries(["todos"]); // Invalidate the entire todos list
},
});
const [todos, setTodos] = useState(useTodoStore);
//watch todos
useEffect(() => {
console.log("todos", todos);
}, [todos]);
function getTodos() {
return Promise.resolve(todos);
}
function updateTodo(todo: any) {
todo.completed = !todo.completed;
const newTodos = todos.map((t: any) => (t.id === todo.id ? todo : t));
setTodos(newTodos);
return Promise.resolve(todo);
}
function deleteTodo(id: number) {
const newTodos = todos.filter((todo: any) => todo.id !== id);
setTodos(newTodos);
return Promise.resolve({});
}
const { data, isLoading, isError } = useQuery({
queryKey: ["todos"],
queryFn: getTodos,
});
const updateMutation = useMutation({
mutationFn: (newTodo) => {
return updateTodo(newTodo);
},
onSuccess: (newTodo) => {
queryClient.invalidateQueries(["todos"]);
},
});
const deleteMutation = useMutation({
mutationFn: (todo: any) => {
return deleteTodo(todo.id);
},
onSuccess: (id) => {
queryClient.invalidateQueries(["todos"]); // Invalidate the entire todos list
},
});
1 Reply
harsh-harlequinOP•3y ago
seems like 'invalidateQueries' doesn't work at all