2024-12-06(optimistic update)

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'] })
  },
})