[ReactQuery] invalidateQueries vs refetch

배경

reactQuery는 QueryCache라는 그릇에 여러 query를 담고있는 구조이며 이 query들은 observer를 통해 component와 소통한다.

여기서 이 두 메서드(invalidateQueries, refetch )는 공통적으로 QueryCache에 있는 query를 fetch한다.

하지만 두 메서드는 동작 방식에 큰 차이를 보인다.
invalidateQueries가 더 선호되는 듯 하다. 관련 discussion

invalidateQueries

invalidateQueries<TPageData = unknown>(queryKey?: QueryKey, filters?: InvalidateQueryFilters<TPageData>, options?: InvalidateOptions): Promise<void>;

queryClient에 속한 메서드로써 위와 같이 queryKey를 기본적으로 넘겨줘 특정 query를 대상으로 동작을 수행한다.

1. 해당하는 쿼리를 모두 invalidate(무효화)한다.
2. 즉 stale한 상태가 된다.
3. stale한 상태에 대하여 observer가 살아있는 query를 탐색한다.
4. observer가 있다면 즉, 현재 화면에 마운트 되어있다면
5. fetch를 진행한다.

위와 같이 조건부로 fetching을 진행한다.

refetch

observer 내부에서 동작하는 메서드로써 useQuery의 return 값으로 사용 가능하다.
기본적으로는 stale(만료된) 데이터를 fetching하며 아래와 같은 특정 조건들 추가로 만족시켜야한다.

refetch는 useQuery를 정의할 때 부터 option을 정할 수 있는데 이는 4가지이다.

• refetchReconnect
• refetchOnWindowFocus
• refetchOnMount
• refetchInterval

여기서 "always"라는 설정을 하게되면 처음 언급한 stale한 조건도 무시하고 fetching을 진행할 수도 있다.

무엇을 써야할까?

참고