낙관적 업데이트할 때 쿼리 요청을 취소하는 이유(Tanstack Query Optimistic Updates)

우혁·2024년 8월 11일

optimistic updates tanstack-query 낙관적 업데이트

Tanstack Query

목록 보기

3/3

낙관적 업데이트(Optimistic Updates)란?

사용자가 데이터를 수정할 때, 서버와의 통신 결과를 기다리지 않고 즉시 사용자 인터페이스(UI)를 업데이트하는 기법이다. 이 방식은 사용자 경험(UX)을 향상시키고, 애플리케이션의 반응성을 높이는 데 도움을 준다.

낙관적 업데이트를 사용하지 않았을 때 플로우

낙관적 업데이트를 사용했을 때 플로우

서버로부터 성공 응답을 받은 경우

서버로부터 에러 응답을 받은 경우

사용 사례

소셜 미디어: 댓글 추가, 좋아요 클릭 등에서 즉시 UI를 반영하여, 사용자 경험을 향상시킨다.
할 일 관리 애플리케이션: 사용자가 할 일을 추가하거나 삭제할 때, 즉시 목록에 반영한다.
전자상거래: 장바구니에 상품을 추가할 때, 사용자에게 즉시 업데이트된 장바구니 상태를 보여준다

Tanstack Query에서 Optimistic Updates 사용하기

Tanstack Query(React Query)는 뮤테이션이 완료되기 전에 UI를 낙관적으로 업데이트하는 두 가지 방법을 제공한다.

1. UI를 통해(Via the UI)

const addTodoMutation = useMutation({
  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
  onSettled: async () => { // promise가 완료될 때까지 Pending 상태
    return await queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

const { isPending, submittedAt, variables, mutate, isError } = addTodoMutation

<ul>
  {todoQuery.items.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
  {isPending && <li style={{ opacity: 0.5 }}>{variables}</li>}
</ul>

onSettled를 async 함수로 선언하여 Promise가 완료될 때까지 pending 상태를 유지하고 UI는 사용자에게 처리 중임을 알린다.
pending 상태일 때는 추가될 할 일 목록을 투명도 0.5로 하여 렌더링한다.
pending 상태가 끝났다는건 쿼리 무효화가 완료됨을 의미하니깐 서버와 동기화가 되어 추가한 할 일이 목록에 추가된다.
만약 에러가 발생해도 할 일 목록에 추가 되지 않아서 문제가 되지 않는다!

💡 submittedAt, variables 이란?
submittedAt: 뮤테이션 요청이 제출된 시간(타임스탬프)를 나타내는 속성이다.
variables: 뮤테이션 요청을 수행할 때 전달된 인자(변수)를 나타내는 속성이다.

2. 캐시를 통해(Via the Cache)

const queryClient = useQueryClient()

useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] })
    
    const previousTodos = queryClient.getQueryData(['todos'])
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
    
    return { previousTodos }
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos)
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})