Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
4.11 바로 투두 삭제가 안됨 질문
Đã giải quyết
Viết
·
62
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);
});
},
});
}이렇게 작성하면 바로 삭제 적용이 됩니다.
무슨 차이가 있는 걸까요?? 그리고 강의에 왜 처음 코드는 바로 삭제 반영이 안 되는 건지 궁금합니다 ㅜㅜ!
Quiz
Loại trạng thái nào phù hợp nhất để quản lý dữ liệu yêu cầu API bất đồng bộ?
Trạng thái cục bộ
Trạng thái toàn cục
Trạng thái máy chủ
Trạng thái UI
Câu trả lời 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
로 최신버전 재설치 하니까 해결됐습니다. 감사합니다!