[Tanstack Query] Optimistic Updates 낙관적 업데이트

Optimistic updates는 서버가 제대로 동작할 것을 낙관적으로 기대하며, 서버로부터의 응답을 기다리지 않고 사용자에게 바로 피드백을 주는 방식을 말한다. useMutation의 onMutate, onError, onSettled 옵션을 활용해 Optimistic updates를 구현할 수 있다.

Optimistic Updates 구현 예시

const updateUserMutation = useMutation({
  mutationFn: async (updatedUser) => {
    await updateUser(updatedUser);
  },
  onMutate: async (updatedUser) => {
    // 1
    await queryClient.cancelQueries(['user', updatedUser.id]);
	// 2
    const previousUserData = queryClient.getQueryData(['user', updatedUser.id]);
	// 3
    queryClient.setQueryData(['user', updatedUser.id], updatedUser);
	// 4
    return { previousUserData };
  },
  onError: (err, updatedUser, context) => {
    queryClient.setQueryData(['user', updatedUser.id], context.previousUserData);
  },
  onSettled: (updatedUser) => {
    queryClient.invalidateQueries(['user', updatedUser.id]);
  },
});

각 옵션의 역할

onMutate

onMutate는 뮤테이션 함수가 실행되기 바로 전에 실행된다.

1. 옵티미스틱 업데이트를 통해 변경하려고 하는 데이터가 refetch로 인해 덮어씌워지는 것을 막기 위해 cancelQueries()를 실행하여, 사용자 관련 데이터를 받아오지 않도록 쿼리를 취소해 준다.
2. 에러가 발생했을 때는 이전의 데이터로 롤백해 줄 수 있도록 롤백용 데이터를 따로 저장해 둔다.
3. 우리가 원하는 값으로 쿼리 데이터를 미리 변경한다.
4. 마지막으로 롤백용 데이터를 리턴해 준다.

onError

onError 의 세 번째 파라미터 context에는 onMutate에서 반환한 값이 들어있다.

1. 롤백용 데이터를 세 번째 파라미터인 context로 받아 온다.
2. context 값으로 쿼리 데이터를 변경해 준다.

onSettled

1. 에러 여부와 상관없이 백엔드 서버와 데이터를 동기화하기 위해 사용자 관련 데이터 쿼리를 invalidate해 준다.

Optimistic Updates의 이점

1. 즉각적인 사용자 피드백: 서버 응답을 기다리지 않고 UI를 업데이트하여 사용자 경험을 개선한다.
2. 빠른 인터랙션: 변경 사항이 즉시 반영되어 사용자 인터페이스가 더 반응적으로 느껴진다.
3. 데이터 일관성 유지: 낙관적 업데이트가 실패하면 이전 상태로 롤백하여 데이터 일관성을 유지한다.

위와 같은 방식으로 React Query를 활용하여 Optimistic updates를 효과적으로 구현할 수 있다. 이를 통해 사용자 경험을 향상시키고, 서버 응답 대기 시간에 대한 문제를 최소화할 수 있다.