React Query에서 invalidateQuries와 revalidate가 의미하는 바는?

React Query를 사용하다 보면 데이터를 최신 상태로 유지하는 것이 중요한데, 이때 invalidateQueries와 revalidate가 중요한 역할을 합니다. 이 두 가지 개념은 모두 데이터를 다시 가져오는(refetch) 역할을 하지만, 작동 방식과 사용 목적이 다릅니다.

React Query의 캐싱 개념

React Query에서는 데이터를 캐싱하여 불필요한 네트워크 요청을 최소화합니다. 캐싱된 데이터는 세 가지 상태로 분류됩니다.

• Fresh: 최신 상태의 데이터이며, refetch가 필요 없음
• Stale: 캐싱된 데이터이지만, 갱신이 필요할 수 있음
• Garbage: 캐시에서 제거된 상태

이러한 상태 관리는 staleTime과 gcTime 설정에 따라 달라집니다.

invalidateQueries vs revalidate

invalidateQueries(무효화)

invalidateQueries는 특정 쿼리를 무효화(invalidate)하여 데이터를 다시 패칭하도록 유도하는 역할을 합니다. 즉, 개발자가 특정 이벤트에서 의도적으로 데이터를 최신 상태로 갱신할 때 사용합니다.

• invalidateQueries(['dataKey'])를 호출하면 해당 쿼리가 stale 상태로 변경됨
• React Query는 stale 상태의 데이터를 refetch하도록 유도함
• 즉, 개발자가 명시적으로 refetch를 실행하는 것과 동일한 효과

revalidate(재검증)

반면 revalidate는 React Query의 자동 refetch 기능을 의미합니다. 다음과 같은 이벤트가 발생할 때 revalidate가 동작할 수 있습니다.

• 창 포커스 변경 (윈도우가 다시 활성화될 때)
• 네트워크 복구 (오프라인 상태에서 온라인으로 전환될 때)

-> revalidate는 자동으로 발생하므로 개발자가 직접 invalidateQueries를 호출하지 않아도 됨

 

예외

• 자동 refetch (refetchInterval 설정)

-> gcTime이 지나기 전이면 fresh 상태에서도 발생할 수 있음 

결론

invalidateQueries는 개발자가 의도적으로 데이터를 갱신할 때 사용, revalidate는 React Query의 자동 데이터 갱신 기능으로 구분할 수 있습니다. 다만, refetchInterval 설정과 같은 예외를 고려하면, 자동과 수동, 의도 여부에 따라 더욱 세밀하게 이해할 수 있습니다.