React Query를 활용한 실시간 리뷰 수 업데이트

애플리케이션에서 데이터를 비동기로 처리할 때 React Query는 매우 유용한 도구입니다. 하지만 데이터를 업데이트하거나 갱신할 때 실시간 반영이 되지 않거나 예상한 대로 작동하지 않는 경우가 종종 발생합니다. 이번 글에서는 React Query를 사용하여 상품 목록에서 리뷰 수를 실시간으로 업데이트하는 방법을 소개하겠습니다.

문제 상황

최근에 상품 목록 페이지를 useInfiniteQuery로 구현하고 있었습니다. 각 상품에는 리뷰 수를 보여주고 있었는데, 리뷰를 추가한 후 상품 목록의 리뷰 수가 바로 갱신되지 않는 문제가 발생했습니다. 리뷰가 추가되었음에도 불구하고 새로고침을 해야만 리뷰 수가 반영되었고, 이는 사용자 경험을 저하시켰습니다.

이 문제를 해결하려면 어떻게 해야 할까요?

문제 원인 분석

• 상품 목록은 useInfiniteQuery를 사용하여 데이터를 불러옵니다. 이 때 상품 목록에 포함된 리뷰 수를 가져오고자 했습니다.
• 리뷰는 별도의 useMutation을 통해 작성되며, 작성 후 QueryKeys.REVIEWS에 대한 invalidateQueries가 호출되어 관련 데이터를 무효화합니다.
• 하지만 QueryKeys.PRODUCTS에 대한 캐시 무효화가 없었기 때문에, 상품 목록 페이지에서 리뷰 수가 실시간으로 갱신되지 않았습니다.

해결 방법 시도

1. invalidateQueries 사용

처음에는 queryClient.invalidateQueries(QueryKeys.PRODUCTS)를 사용하여 상품 목록 데이터를 무효화하고 다시 요청하는 방법을 시도했습니다.
하지만 이 방법은 전체 상품 목록을 다시 불러오는 방식이기 때문에 성능 상 비효율적일 수 있었습니다.

그리고 실제로 적용해보니 상품목록 페이지로 다시 가도 리뷰 수가 새로 업데이트 되지도 않았습니다.

2. setQueryData 사용

다음으로 queryClient.setQueryData를 사용하여 상품 목록 캐시를 직접 수정하려 했습니다.
그러나 useInfiniteQuery에서는 페이지별로 데이터를 다루기 때문에 이 방법이 매우 복잡하게 느껴졌고 결국 실용적이지 않다고 판단했습니다.

최종 해결 방법: refetchQueries 사용

여러 방법을 시도한 결과, 리뷰가 추가된 후 상품 목록 데이터를 즉시 리패치하는 방법이 가장 적합하다는 결론을 내렸습니다.

리뷰를 추가하는 useMutation에서 성공적으로 리뷰가 추가되면 queryClient.refetchQueries를 사용하여 상품 목록 데이터를 즉시 리패치하게 설정했습니다.

 

const queryClient = getClient();

const { mutate: addReview } = useMutation<Review, unknown, { productId: string; content: string; rating: number; uid: string }>(
  ({ productId, content, rating, uid }) => graphqlFetcher(ADD_REVIEW, { productId, content, rating, uid }),
  {
    onSuccess: () => {
      // 리뷰가 추가되면 상품 목록을 즉시 리패치
      queryClient.refetchQueries([QueryKeys.PRODUCTS, "products"]);
    },
  }
);

 

이제 리뷰가 추가되면 상품 목록의 리뷰 수가 즉시 업데이트되어 새로고침 없이 바로 결과를 확인할 수 있게 되었습니다.

 

배운 점

• invalidateQueries는 데이터를 비동기적으로 무효화하고 리패치되므로, 즉시 UI를 갱신할 때는 다소 딜레이가 있을 수 있습니다.  
• refetchQueries는 즉시 리패치를 트리거하여 실시간으로 데이터가 반영되므로, 빠른 업데이트가 필요할 때 유용합니다.
• useInfiniteQuery와 같은 페이지네이션 쿼리에서 부분적인 캐시 수정은 setQueryData보다는 refetchQueries가 더 직관적이고 유지보수에 용이합니다.

마치며

이번 트러블슈팅을 통해 React Query의 캐시 관리와 데이터 갱신 방식에 대해 더 깊이 이해하게 되었습니다. 데이터가 실시간으로 반영되도록 처리하는 것은 사용자 경험에 큰 영향을 미치며, 이와 같은 방법을 활용하면 더 나은 성능을 제공할 수 있습니다.