Inflearn Community Q&A

안녕하세요 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는 "낙관적으로 바꿔놓은 캐시를, 뒤늦게 도착한 옛날 데이터가 덮어쓰는 것"을 막기 위한 안전장치라고 이해하시면 됩니다.