인프런 커뮤니티 질문&답변
작성한 질문수
4.11 바로 투두 삭제가 안됨 질문
작성
·
56
0
투두 삭제할 때 mutation 부분 코드를 강의와 똑같이
// use-delete-todo-mutation.ts
export function useDeleteTodoMutation() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: deleteTodo,
onSuccess: (deletedTodo) => {
queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list, (prevTodos) => {
if (!prevTodos) return [];
return prevTodos.filter((prevTodo) => prevTodo.id !== deletedTodo.id);
});
},
});
}
이렇게 치면 바로 삭제가 안 되고 새로고침해야 적용이되는데
export function useDeleteTodoMutation() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: deleteTodo,
onSuccess: (_data, deletedId) => {
queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list, (prevTodos) => {
if (!prevTodos) return [];
return prevTodos.filter((prevTodo) => prevTodo.id !== deletedId);
});
},
});
}이렇게 작성하면 바로 삭제 적용이 됩니다.
무슨 차이가 있는 걸까요?? 그리고 강의에 왜 처음 코드는 바로 삭제 반영이 안 되는 건지 궁금합니다 ㅜㅜ!
답변 3
1
안녕하세요 보내주신 코드 잘 확인해봤습니다.
확인해보니 json-server의 버전이 과거의 버전으로 설치되어 있더군요
npm uninstall json-server로 제거하신 다음, npm i json-server로 최신 버전을 설치해 다시 사용해주시면 정상적으로 작동하게 될 겁니다 😀
0
안녕하세요 으악님 이정환입니다.
혹시 deleteTodo 함수의 반환값이 다음과 같이 잘 설정이 되어 있는 상황일까요?
import { API_URL } from "@/lib/constants";
import type { Todo } from "@/types";
export async function deleteTodo(id: string) {
const response = await fetch(`${API_URL}/todos/${id}`, {
method: "DELETE",
});
if (!response.ok) throw new Error("Delete Todo Failed");
const data: Todo = await response.json();
return data;
}강의에서 안내드린 것 처럼 deleteTodo 함수가 삭제된 아이템을 반환하지 않을 경우 onSuccess 함수에 매개변수로 삭제된 아이템이 제공되지 않을 수 있습니다. 이 부분을 확인해보셔야 할 듯 싶습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 으악님.
질문에서 주신 문제는 deleteTodo 함수를 통한 mutation에서 onSuccess 콜백의 파라미터 사용 차이에서 비롯된 것 같습니다.
문제의 원인
첫 번째 코드:
onSuccess의 첫 번째 파라미터deletedTodo가 사용되었습니다. 이 경우는mutationFn(deleteTodo)의 반환 값을deletedTodo로 받습니다. 만약deleteTodo함수가 반환하는 데이터에id속성이 포함되어있지 않은 경우,deletedTodo.id는 예상대로 작동하지 않을 수 있습니다.두 번째 코드:
onSuccess의 두 번째 파라미터deletedId를 사용하셨습니다.deletedId는mutation.mutate호출 시 전달한 파라미터로, 삭제할 때 명시적으로 삭제할 ID를 가져와 사용합니다.
요약
- 첫 번째 코드에서는
deleteTodo함수의 반환 값에 따라deletedTodo.id를 사용할 수 있습니다. 만약deleteTodo에서 반환하는 객체가 예상과 다르다면, 빈 필터링 결과가 나오게 됩니다.
- 두 번째 코드에서는
mutation.mutate호출 시 넘겨준deletedId를 사용하여 안전하게 필터링 되며, 이 방식은deleteTodo함수의 반환 값에 의존하지 않습니다.
해결 방안
deleteTodo함수가 제대로된 객체(즉,id가 포함된)를 반환하는지 확인하거나, 두 번째 코드와 같이 명시적으로 ID를 사용할 수 있습니다.
이러한 차이로 인해 두 코드간에 동작 차이가 생긴 것으로 보입니다. 여러분의 이해를 돕기 위해 관련 질문 URL을 함께 공유드립니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
npm install json-server@latest
로 최신버전 재설치 하니까 해결됐습니다. 감사합니다!