[React-Query] DB 데이터 삭제 후 성공 여부 확인하는 방법은?

Q. React-Query 사용 시 DB 데이터를 delete 했을 때 성공, 실패 여부를 어떻게 확인할 수 있는가?

 

1) onMutate과 onSuccess에서 invalidate 사용하여 파악 가능

const useDeleteItem = () =>
  useMutation({
    mutationFn: deleteItem,
    onSuccess: (_data, id) => {
      // 목록, 상세 등 관련 캐시 무효화
      queryClient.invalidateQueries({ queryKey: ['items'] });
      queryClient.invalidateQueries({ queryKey: ['item', id] });
    },
  });

 

 

2) onMutate + Optimistic update로 즉시 반영

- UI에 즉시 반영 후 성공 시 목록에서 삭제하고, 실패 시 롤백하는 방법으로 유저 입장에서 체감 속도가 올라감

const useDeleteItem = () =>
  useMutation({
    mutationFn: deleteItem,
    onMutate: async (id: string) => {
      await queryClient.cancelQueries({ queryKey: ['items'] });

      const prev = queryClient.getQueryData<Item[]> (['items']);

      // 즉시 목록에서 제거
      queryClient.setQueryData<Item[]>(['items'], old =>
        (old ?? []).filter(item => item.id !== id)
      );

      return { prev };
    },
    onError: (_err, _id, ctx) => {
      // 실패 시 롤백
      if (ctx?.prev) queryClient.setQueryData(['items'], ctx.prev);
    },
    onSettled: (_data, _err, id) => {
      // 최종적으로 서버와 동기화
      queryClient.invalidateQueries({ queryKey: ['items'] });
      queryClient.invalidateQueries({ queryKey: ['item', id] });
    },
  });

 

사용 후 캐시 삭제

queryClient.removeQueries({ queryKey: ['item', id] });

 

결론

상황에 따라 적용할 수 있는 방법은 많지만 onMutate와 onSettled를 사용한 Optimistic Update로 유저에게 빠른 UI 변화를 보여주는 것이 좋아보인다.