[React Query] 데이터는 언제 fetch 될까? - (2) Refetch

(1) Fresh와 Stale 상태 보러가기

 

 

 

이번에는 useQuery를 통해서 저장 된 데이터를 변경하는 메서드에 대해서 알아볼 예정이다. 대표적으로 다음과 같이 3개의 메서드가 존재한다.

1. setQueryData
2. invalidateQueries
3. refetchQueries
   

 

🎈 자동 Refetch 되는 시점 알아보기

쿼리의 상태가 stale 상태가 되더라도 즉시 refetch 되지 않는다. refetch 되는 시점을 알아야 문제가 발생했을 때 무엇이 문제인지 파악하기 쉬워진다.

 

자동적으로 refetch가 되는 조건은 다음과 같다.

1. 쿼리를 사용하는 컴포넌트가 마운트될 때
2. 윈도우가 포커스 될 때
3. 네트워크가 재연결 될 때
4. refetchInterval 설정을 통해 요청할 때

 

stale 상태인 쿼리가 위의 조건을 만족할 때 refetch를 실행하게 된다.

 

즉, 위의 조건이 아닌 상태에서는 쿼리가 stale 상태이더라도 refetch가 되지 않고 이전 데이터를 계속 보여주게 된다.

 

📯 수동으로 Refetch 하기

수동으로 refetch 하는 방법은 2가지가 존재한다.

1. 쿼리 무효화
2. refetch 메서드 호출

 

✅ 쿼리 무효화

첫번째 방법인 쿼리 무효화의 경우 해당 쿼리를 stale 상태로 변경하고 잠재적으로 refetch 되도록 해준다.

 

즉, 현재 액티브 상태인 쿼리가 대상이라면 즉시 refetch를 해주고, 비활성화 상태인 쿼리라면 자동 refetch 시점에 refetch가 된다.

 

✅ 강제 refetch

두번째 방법은 해당하는 쿼리를 즉시 refetch를 하는 방법이다. 쿼리 무효화와 차이점은 refetch의 대상이 비활성화 상태더라도 즉시 refetch를 해준다.

 

그래서 즉시 refetch 되어야 할 대상이 아니라면 성능상 쿼리 무효화를 사용하는 것이 좋다.

두가지 방법 모두 활성화 상태인 쿼리를 대상으로 호출하게 되면 즉시 refetch가 이루어진다.

 

 

🛒 데이터를 변경하는 또다른 방법

위의 두가지 방법은 fetch를 통해서 최신 데이터를 가져올 수 있다. fetch를 통해서가 아닌 방법으로 데이터를 변경할 수 있다.

setQueryData를 통해서 직접 데이터를 변경할 수 있다.

 

const queryClient = useQueryClient();
queryClient.setQueryData(queryKey, newValue);

 

setQueryData를 통해서 데이터를 변경하는 경우 즉시 리렌더링된다.

 

 

🙄 결론

현재 활성화 상태인 쿼리를 대상으로 다음과 같은 메서드를 사용하는 경우 즉시 리렌더링 된다.

1. setQueryData
2. invalidateQueries
3. refetchQueries