Optimistic Update
- 서버 요청이 잘 이루어질 것이라고 가정하여 UI를 먼저 변경한다.
- 실패하는 경우 UI를 원상복구한다.
- 빠르다.
- 인스타그램의 좋아요 기능 등.
코드에서 적용
useMutations으로 addTodo를 실행하였을 때
1. 예상 : 데이터를 입력 -> 입력된 데이터가 추가 -> UI에 보여짐.
2. Optimistic Update
query 취소 -> 데이터를 받아 UI에 추가 -> addTodo 실행
=> 실패하면 이전 데이터를 다시 setQueryData로 받아 로컬 데이터베이스에 넣는다.
=> 실패하든 성공하든 DB의 내용을 캐시 내용에 반영하기 위해 onSettled를 실행하여 invalidationQueries를 실행한다.
=> DB에 있는 내용을 다시 캐싱한다.