Optimistic update는 서버에 요청을 보낼 때, 서버의 응답을 기다리지 않고, 먼저 UI에 변경 사항을 즉시 반영하는 방식이다.
위 링크를 통해 간단하게 사용해볼 수 있을 것 같다.
- 뮤테이션이 실행되기 전에 현재의 데이터를 스냅샷하고, (getQueryData)
낙관적인 업데이트(예상된 변경)를 반영한다. (setQueryData)
이때, 기존의 데이터를 덮어쓰지 않도록 리패칭을 취소한다. (cancelQueries)
-> onMutate
- 만약 뮤테이션이 실패할 경우,
뮤테이션이 실행되기 전에 리턴했던 스냅샷 데이터가 context로 전달되어 원래 상태로 복구한다.
-> onError
- 성공 또는 실패와 상관없이 뮤테이션 후 데이터를 다시 가져온다.
-> onSettled
결과적으로 사용자 경험을 개선하고, 서버 응답이 느리더라도 빠른 피드백을 제공할 수 있다.
프론트엔드 개발공부를 하고있습니다.