(4.13) 캐시 정규화하기 2
77
작성한 질문수 1
개별 캐시 데이터는 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);
});이렇게 다시 세팅하는거 아닌가요?
답변 2
0
안녕하세요 gulove112님 이정환입니다.
사용자가 특정 투두 아이템의 체크박스를 클릭하여, useUpdateTodoMutation이 실행되었을 경우를 말씀하시는게 맞을까요? 그렇다면 이 경우에는 QUERY_KEYS.todo.list 캐시를 무효화 하지 않는데 혹시 구체적으로 의문이 남으신 포인트가 어디인지 궁금합니다. 추가 질문을 답글이나 새로운 게시글로 남겨주시면 답변 드리겠습니다.
0
게시글이 늦었네요.
말씀 주신 것처럼 useUpdateTodoMutation이 실행되었을 경우 맞습니다.
다만 궁금한 점은, onSettled 이벤트 핸들러를 제거하지 않았을 때 QUERY_KEYS.todo.list 캐시가 무효화되어 refetching 되면서 개별캐시(QUERY_KEYS.todo.detail)도 함께 갱신(재정의)되는 것이 아닌지입니다.
이 부분에 대해 확인 부탁드립니다.
0
안녕하세요, 인프런 AI 인턴입니다. gulove112님.
React Query를 활용한 캐시 관리 부분에서 질문주신 사항을 살펴보겠습니다.
캐시 정규화에서는 리스트와 디테일 캐시를 함께 관리하게 됩니다. QUERY_KEYS.todo.list를 무효화하면 리스트의 데이터를 서버로부터 다시 가져오게 됩니다. 그리고 새로 가져온 리스트 데이터를 개별 todo로 분리해 세팅합니다. 이 과정이 queryClient.setQueryData<Todo>(QUERY_KEYS.todo.detail(todo.id), todo);에서 이루어지는데, 이를 통해 리스트로부터의 각 todo가 디테일 캐시로 업데이트 됩니다.
즉, 캐시 정규화는 리스트가 바뀌면 자연스럽게 디테일 뷰의 데이터도 동기화하는 편리한 방법입니다. 때문에 onSettled 핸들러에서 별도로 리스트를 무효화하지 않아도 리스트의 변동 시마다 디테일 캐시가 자동으로 최신 상태로 유지됩니다.
이 부분에 관해서 이미 언급된 유사한 논의가 아래 링크에서도 확인할 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
회원가입 구현 (구현 후 최종 화면 출력 X)
0
64
2
(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의
0
56
1
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
55
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
69
2
6.8 zustand 세션 질문입니다.
0
109
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
92
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
1
403
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
84
2
4.11 바로 투두 삭제가 안됨 질문
0
102
3
매개변수 updatedTodo 관련 질문
0
79
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
91
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
85
2
4.6 id를 string으로 변경시 오류
0
74
2
리액트 타입스크립트 관련 질문있습니다.
0
71
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
108
2
ui 파일 질문드립니다.
0
90
1
tanstack query devtools에서 질문있습니다!
0
75
2
댓글 삭제 시 isPending 질문
0
72
2
두번째 예외상황에 대해 질문있습니다!
0
69
1
리액트 쿼리 질문입니다
1
83
2
개발자도구에서 components 가 안보입니다.
0
108
3
state 관리에 대한 정리
0
88
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
210
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
87
1