인프런 커뮤니티 질문&답변
작성한 질문수
(4.13) 캐시 정규화하기 2
작성
·
11
0
개별 캐시 데이터는 disabled 상태라 캐시를 무효화 해봤자 데이터를 다시 불러오지 않는다고 하시면서 use-upate-todo-mutation.ts 파일에서 onSettled 이벤트 핸들러를 삭제하셨습니다. 그런데 이 부분이 이해가 잘 가지 않습니다. QUERY_KEYS.todo.list를 무효화 하면 todo 목록을 가지고 오면서 개별 캐시 데이터도
todos.forEach((todo) => {
queryClient.setQueryData<Todo>(QUERY_KEYS.todo.detail(todo.id), todo);
});이렇게 다시 세팅하는거 아닌가요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. gulove112님.
React Query를 활용한 캐시 관리 부분에서 질문주신 사항을 살펴보겠습니다.
캐시 정규화에서는 리스트와 디테일 캐시를 함께 관리하게 됩니다. QUERY_KEYS.todo.list를 무효화하면 리스트의 데이터를 서버로부터 다시 가져오게 됩니다. 그리고 새로 가져온 리스트 데이터를 개별 todo로 분리해 세팅합니다. 이 과정이 queryClient.setQueryData<Todo>(QUERY_KEYS.todo.detail(todo.id), todo);에서 이루어지는데, 이를 통해 리스트로부터의 각 todo가 디테일 캐시로 업데이트 됩니다.
즉, 캐시 정규화는 리스트가 바뀌면 자연스럽게 디테일 뷰의 데이터도 동기화하는 편리한 방법입니다. 때문에 onSettled 핸들러에서 별도로 리스트를 무효화하지 않아도 리스트의 변동 시마다 디테일 캐시가 자동으로 최신 상태로 유지됩니다.
이 부분에 관해서 이미 언급된 유사한 논의가 아래 링크에서도 확인할 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.