개발 일기

2024-12-06(optimistic update)

민ズl 2024. 12. 6. 15:29

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