React Query에서 invalidateQuery vs refetchQuery

안녕하세요, React Query를 활용한 프로젝트에서 캐싱 전략에 대해 고민할 일이 생겨 이렇게 Discussions를 남깁니다. (요즘 실무에서 apolloClient를 쓰고 있긴 하지만..)

MVP를 빠르게 만들 때는 단순히 refetchQuery로 모든 걸 다시 불러오는 방식이 직관적이고 편한 경우가 많습니다. 하지만 Product Engineer 관점에서 보면, 사용자 경험이나 성능, 네트워크 사용량까지 고려해야 하니 단순히 다시 불러오는 방식이 늘 최선은 아니라는 생각은 매번 있습니다.

보통 데이터 변경 이후 기존 쿼리를 새로 가져올 때 아래와 같은 선택지가 있잖아요.

1. queryClient.invalidateQueries()

   • 쿼리를 stale 상태로 만들고, 다음 렌더링 시 자동으로 refetch
   • 장점: 선언적이며, staleTime 등의 설정과 잘 맞음
   • 단점: 즉각적인 데이터 반영이 필요할 땐 체감이 늦을 수 있음

2. queryClient.refetchQueries()

   • 해당 쿼리를 즉시 다시 요청
   • 장점: 눈에 띄는 빠른 반영
   • 단점: 무조건 네트워크 요청 발생 (중복 요청 우려)

3. queryClient.setQueryData() + 옵티미스틱 업데이트

   • API 호출 없이 캐시만 업데이트하거나 optimistic하게 UX 제공
   • 장점: 네트워크 비용 없음, UX 빠름
   • 단점: 복잡도 증가, rollback 로직 필요

이런 상황에서 고민이 됩니다

• 빠르게 구현해야 하는 MVP 단계에서는 refetchQueries가 더 편하고 직관적인것 같은데..
• 실제 서비스 환경에서는 너무 많은 네트워크 요청이 UX와 성능에 악영향을 줄 수도 있고요.
• 특히 여러 컴포넌트가 같은 쿼리를 공유할 때는 invalidateQueries가 더 일관되게 관리되는 느낌도 있습니다.

여러분들은,

1. MVP 단계에서는 어떤 전략을 선호하시나요?
2. 운영 중인 서비스에서는 어떤 기준으로 invalidate vs refetch를 나눠서 사용하시나요?
3. UX, 성능, 일관성 측면을 고려한 베스트 프랙티스가 있다면 공유해주시면 감사하겠습니다.
4. 아니면 다른 알고있는 캐싱전략도 좋아요!