[React-Query] 리액트 쿼리 브라우저 복귀시 API 중복 요청 방지

문제 발생

리액트 쿼리(React Query, TanStack Query)를 사용해서 데이터를 받아오는 API 중 브라우저 탭 외의 영역을 클릭 후 다시 크롬 브라우저 내부를 클릭 했을 때 API가 다시 요청되는 현상이 발생했다.

브라우저 클릭 후 윈도우 바탕화면 클릭 반복

 

Background Refetching

사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터가 최신 상태인지 보장하기 위해서 브라우저가 암묵적으로 해당 캐시에 대한 데이터를 재요청하는 것을 의미한다.

캐시를 사용하면서 매번 Background Refetching을 한뒤, 변경 사항이 있다면 UI를 변경한다.

 

refetchOnWindowFocus 옵션

1. true (기본값)
2. false
3. always

true

• 사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터를 최신 상태로 동기화하기 위해 기본값이 true로 설정되어 있다. 즉, 데이터가 stale상태인 경우 자동으로 refetch한다.

false

• useQuery에 refetchOnWindowFocus 옵션을  false로 설정하면 위 현상을 중지시킬 수 있다. 브라우저 바깥을 클릭했다가 돌아와도 강제로 새로고침하지 않는 이상 refetch되지 않는다.
• 자주 업데이트될 필요가 없고, 페이지 이동을 하지 않는 한 같은 데이터를 유지하는 경우 성능을 최적화하고 불필요한 API 호출을 줄일 수 있다.

always

• 항상 refetch를 진행하며 데이터가 fresh 상태일 때도 refetch를 실행한다.

※ react-query 의 라이프 사이클과 상태
 
1. fetching : 요청 상태인 쿼리 (대기중)
2. fresh : 새롭게 추가된 쿼리 인스턴스이며, 만료되지 않은 쿼리이다. 컴포넌트의 mount, update 시에 데이터를 재요청하지 않는다. (항상 캐시된 데이터를 가져옴)
3. stale : 데이터 패칭이 완료되어 만료된 쿼리. stale 상태의 같은 쿼리를 useQuery로 재호출하여 컴포넌트 마운트를 한다면 캐싱된 데이터가 반환된다.
4. inactive : 비활성 쿼리로써 사용하지 않음. 5분 뒤에 가비지 콜렉터가 캐시에서 제거한다.
5. delete : 가비지 콜렉터에 의하여 캐시에서 제거된 쿼리.

 

코드 예시

useQuery의 Query Option에 refetchOnWindowFocus: false 를 추가해준다.

export const useGetListData = (): UseQueryResult<any, unknown> => {
  const getListData = async () => {
    try {
      const { data } = await axios.get(`${BACKEND_URL}/service/api`);
      return data;
    } catch (error: any) {
	  console.log("API 조회에 실패 했습니다.", error)
    }
  };
  return useQuery(["getListData"], () => getListData(), {
    refetchOnWindowFocus: false, // 브라우저 포커스가 돌아오면 재요청 끄기
  });
};

 

 

참고 자료

https://seungddak.tistory.com/176

https://velog.io/@bebrain/React-query-refetchOnWindowFocus%EC%86%8D%EC%84%B1