두번째 예외상황에 대해 질문있습니다!
이해가 잘 안돼서요ㅜㅜ
조회가 완료되기전 업데이트를 하는 경우 DB에 저장되는 값과 화면에 노출되는 값이 다를수가 있다는 얘기일까요?
업데이트를 한다는건 화면에 데이터가 노출된다는건데 이 얘기는 캐시에 담겨져있는 데이터를 먼저 노출시킨다는 얘기일까요?
回答 1
1
안녕하세요 gogo님 이정환입니다.
낙관적 업데이트시 주의해야 하는 두번째 예외상황에 대해 더 자세히 설명해드릴게요!
아래와 같은 상황을 가정해 보겠습니다.
1. 페이지에서 조회 요청을 보냄 (이유 불문)
사용자가 페이지에 접속하거나, 탭을 전환해서 돌아오거나, 어떤 이유로든 TanStack Query가 서버에 todos 데이터를 요청합니다. 이 요청은 네트워크 상황에 따라 응답이 느릴 수도 있습니다.
2. 사용자가 특정 Todo 아이템의 체크박스를 클릭함 (업데이트 요청 발생)
1번의 조회 응답이 아직 도착하지 않은 상태에서, 사용자가 특정 Todo 아이템의 체크박스를 클릭합니다.
3. onMutate가 실행되어 낙관적 업데이트 진행
바로 위인 2번에서 사용자가 특정 Todo 아이템의 체크박스를 클릭하였기 때문에, useUpdateTodoMutation의 onMutate가 실행됩니다.
캐시 데이터를 직접 수정해서 화면에 업데이트가 반영된 상태를 즉시 보여줍니다. 사용자 입장에서는 "잘 동작하네" 하고 느끼게 됩니다.
4. 1번에서 보낸 조회 요청이 뒤늦게 완료됨
여기서 문제가 발생합니다.
1번에서 보낸 조회 요청은 체크박스를 클릭하기 이전 시점의 데이터를 담고 있습니다. 즉 업데이트 결과가 반영되지 않은 데이터입니다.
TanStack Query는 서버 응답이 도착하면 캐시를 이 데이터로 덮어쓰기 때문에, 3번에서 낙관적으로 반영했던 업데이트 결과가 사라져 버립니다.
사용자 입장에서는 분명 체크박스를 눌렀는데, 갑자기 취소된 것처럼 보이게 되는 거죠.
5. mutation이 완료됨
서버에는 업데이트 결과가 정상적으로 저장되었습니다. 하지만 화면에는 체크박스가 해제된 상태로 보입니다. 다음번 조회가 일어나기 전까지는 화면과 서버의 데이터가 어긋나 있는 상태가 됩니다.
이런 문제를 방지하기 위해 onMutate에서 cancelQueries를 호출하는 것입니다. 낙관적 업데이트를 하기 직전에, 현재 진행 중인 조회 요청을 취소해 버리면 4번 상황 자체가 발생하지 않습니다.
정리하면, cancelQueries는 "낙관적으로 바꿔놓은 캐시를, 뒤늦게 도착한 옛날 데이터가 덮어쓰는 것"을 막기 위한 안전장치라고 이해하시면 됩니다.
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
25
2
6.8 zustand 세션 질문입니다.
0
69
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
57
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
0
205
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
61
2
4.11 바로 투두 삭제가 안됨 질문
0
73
3
매개변수 updatedTodo 관련 질문
0
55
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
72
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
58
2
4.6 id를 string으로 변경시 오류
0
54
2
리액트 타입스크립트 관련 질문있습니다.
0
53
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
87
2
ui 파일 질문드립니다.
0
63
1
tanstack query devtools에서 질문있습니다!
0
56
2
댓글 삭제 시 isPending 질문
0
55
2
리액트 쿼리 질문입니다
0
56
2
개발자도구에서 components 가 안보입니다.
0
78
3
state 관리에 대한 정리
0
69
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
148
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
66
1
삭제가 바로 안되네요ㅠ
0
55
2
access 토큰은 꼭 소셜서버로부터 받아서 사용해야만하나요?!
0
72
2
전역 모달이 여러 개일 경우 모달 프로바이더는 몇 개가 필요한가요?
0
53
1
프로필 수정 후 post item 의 글들에서 수정된 프로필 업데이트 반영
0
70
2