optimistic update
- onMutate : UI를 낙관적으로 업데이트하고 백업 데이터를 저장
- OnError : 요청이 실패하면 백업 데이터를 사용해 UI를 원래대로 돌림
- OnSettled : 요청이 끝난 후 데이터를 서버에서 다시 가져와 최신 상태를 보여줌
// queryClient : 쿼리 데이터를 관리하는 중요한 객체
const queryClient = useQueryClient() // 앞으로 쿼리 데이터(todos)를 읽거나 수정하는 데 사용
// useMutation : 서버에 데이터를 보낼때 사용하는 함수 , 주로 새로운 데이터 생성, 수정, 삭제를 처리할 때 사용
useMutation({
// mutation : 실제로 데이터를 서버에 보내는 함수
mutationFn: updateTodo,
// onMutate : mutate 함수가 호출될 때 가장 먼저 실행 , 낙관적 업데이트의 핵심 부분
onMutate: async (newTodo) => {
await queryClient.cancelQueries({ queryKey: ['todos'] }) // 만약 진행 중인 요청이 있다면, 낙관적 업데이트가 덮어쓰이는 걸 방지하기 위해 중단
// 마치 백업같이 만들어둠
const previousTodos = queryClient.getQueryData(['todos'])
//setQueryData를 사용해 todos 데이터를 즉시 업데이트
queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
// onMutate에서 마지막으로 previousTodos라는 데이터를 반환
return { previousTodos }
},
// onError : 서버 요청이 실패했을 때 실행되는 코드
onError: (err, newTodo, context) => {
queryClient.setQueryData(['todos'], context.previousTodos)
},
// onSettled : 성공하든 실패하든 요청이 끝난 후 실행
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
},
})
'개발 일기' 카테고리의 다른 글
2024-12-11(타입스크립트) (0) | 2024.12.11 |
---|---|
2024-12-09(타입스크립트) (1) | 2024.12.09 |
2024-12-02(tanstack query - 더보기, 무한스크롤) (1) | 2024.12.02 |
2024-11-29(tanstack query) (0) | 2024.11.29 |
2024-11-27(상태관리,zustand) (0) | 2024.11.27 |