Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 자바스크립트
- 한글 공부 사이트
- 타입스크립트
- 리액트 팀 프로젝트
- 타입스크립트 props
- 파이썬 반복문
- Next 팀 프로젝트
- 내일배움캠프 프로젝트
- useState
- REACT
- 파이썬 for
- typeScript
- 파이썬 slice
- 내배캠 프로젝트
- 내일배움캠프
- js
- 파이썬 replace
- 파이썬 enumerate
- 리액트 훅
- 파이썬 for in
- 내일배움캠프 최종 프로젝트
- 리액트 프로젝트
- JavaScript
- tanstack query
- 코딩테스트
- React Hooks
- 프로그래머스
- 파이썬 list
- 리액트
- 타입스크립트 리액트
Archives
- Today
- Total
aotoyae
[React] TanStack Query : Optimistic Updates 옵티미스틱 업데이트 본문
💡 사용자에게 빠른 피드백을 제공하도록 하는 옵티미스틱(낙관적) 업데이트
어떤 요청이 있었을 때 서버 요청이 정상적으로 잘 될거란 가정 하에 UI 를 먼저 변경하고, 그 후 요청을 보내는 방식!
서버 요청이 실패한다면 UI 는 다시 원상복구(revert / roll back) 된다.
const addMutation = useMutation({
mutationFn: addTodo, // 실행 순서 (2)
// onSuccess: () => { ** 기존 방식 성공하면 무효화
// queryClient.invalidateQueries(["todos"]);
// },
onMutate: async (newTodo) => { // 실행 순서 (1)
console.log("onMutate 호출");
await queryClient.cancelQueries({ queryKey: ["todos"] }); // 가지고 오고 있던 쿼리 취소
const previousTodos = queryClient.getQueryData(["todos"]); // 현재 데이터 백업
queryClient.setQueryData(["todos"], (old) => [...old, newTodo]); // 클라이언트 사이드에서 데이터 갱신
return { previousTodos };
},
onError: (err, newTodo, context) => { // 실행 순서 (3) ** 에러라면
console.log("onError");
console.log("context:", context);
queryClient.setQueryData(["todos"], context.previousTodos); // 백업했던 데이터로 다시 셋
},
onSettled: () => { // 실행 순서 (4) ** 성공했다면
console.log("onSettled");
queryClient.invalidateQueries({ queryKey: ["todos"] }); // 무효화
},
});
🔗 https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates
'React' 카테고리의 다른 글
[React] TanStack Query : Paginated & Lagged Queries 페이지네이션 & 지연 쿼리 (0) | 2024.08.07 |
---|---|
[React] TanStack Query : Prefetching 프리패칭 (0) | 2024.08.07 |
[React/TS] input max-length 최대 입력 글자수 제한 & input 안에 입력값 길이 표시 (0) | 2024.04.13 |
[React/TS] 이미지 첨부 & 미리보기 : useRef, FileReader, createObjectURL (0) | 2024.04.04 |
[React] input radio : id, for, name, value ?! (1) | 2024.04.03 |