[ReactQuery] refetch에 대해서 알아보자 ! (feat. 전역 refetching, Polling)

❓ refetch 

refetch와 refetch가 일어나는 조건에 대해서는 해당 링크에서 가볍게 다뤘으니 살펴보도록 하자.

 

❗ refetch와 관련된 옵션

✔ refetchOnMount

이 옵션은 boolean 타입을 가지며 구성 요소가 마운트될 때 (즉, 처음 렌더링될 때) 데이터를 다시 가져와야 하는지 여부를 결정한다. 'false'로 설정되면 구성 요소가 마운트(초기 렌더링)될 때 데이터를 자동으로 다시 가져오지 않고, 'true'로 설정하면 구성 요소가 마운트 될 때 데이터를 자동으로 다시 가져온다.

✔ refetchOnWindowFocus

이 옵션은 boolean 타입을 가지며 창이 포커스를 얻을 때 데이터를 다시 가져와야 하는지 여부를 결정한다.

'false'로 설정되면 창이 포커스를 얻을 때 데이터를 다시 가져오지 않음을 나타내고, 'true'로 설정하면 사용자가 구성 요소가 렌더링되는 탭이나 창으로 다시 전환할 때마다 데이터를 자동으로 다시 가져옵니다.

✔ refetchOnReconnect

이 옵션은 boolean 타입을 가지며  네트워크 연결이 다시 설정될 때 데이터를 다시 가져와야 하는지 여부를 결정한다.

'false'로 설정되면 네트워크 재연결이 발생할 때 데이터를 다시 가져오지 않음을 나타내고, 'true'로 설정하면 구성요소가 인터넷 재연결을 감지하면 자동으로 데이터 다시 가져오기를 트리거한다.

 

✔ refetchInterval

이 옵션은 staleTime과 cacheTime과 동일하게 정수 타입을 가지며 refetchInterval: 60000이면 1분이다.

이 옵션을 사용하면 데이터를 다시 가져올 시간(밀리초)을 지정할 수 있고 refetchInterval을 60000(1분)으로 설정하면 데이터가 1분마다 자동으로 다시 가져온다.

이렇게 총 4개의 refetch와 관련된 옵션이 존재한다.

refetchOnMount, refetchOnWindowFocus, refetchOnReconnect 해당 옵션의 초기값은 'true'이다.

---

✔ 예제

 

예제를 살펴보며 조금 더 이해를 해보자

  const { data = fallback } = useQuery([queryKeys.treatments], getTreatments, {
    staleTime: 6000, // 1분
    cacheTime: 30000, // 5분 (cacheTime의 기본값은 5분이고 cacheTime이 statleTime보다 짧아선 안됨)
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
  });

이해를 돕기위한 예제 코드이다.

해당 코드는 구성 요소가 마운트될 때, 창이 포커싱 될 때, 네트워크 재연결이 발생할 때 모두 데이터를 가져오지 않으며 staleTIme은 1분, cacheTime은 5분을 가진다. staleTime과 cacheTime은 해당 링크를 통해 자세히 알아보자.

 

여기서 주의할 점은 cacheTime은 staleTime보다 짧은 시간으로 설정하는 것을 권하지 않는다.

 

만약 cacheTime이 staleTime보다 짧은 경우 캐시는 cacheTime이 만료되면 새로운 데이터를 버리고 오래된 데이터로 되돌아가서 이로 인해 데이터 업데이트가 일관되지 않고 사용자에게 혼란을 줄 수 있고, 데이터가 staleTIme에 도달할 떄 까지  fresh 상태로 남아있는데 이렇게 되면 cacheTime보다 오래 지속되어 백그라운드 다시 가져오기를 시작하지 않게 되고 이로 인해 자동으로 데이터를 가져오는 횟수가 줄어들고 결과적으로 최신 데이터 가져오기 및 업데이트가 지연되어 데이터가 자주 변경되는 애플리케이션의 응답성에 영향을 미칠 수 있다.

---

❗ 전역으로 refetch 사용해보기

이전에 전역으로 에러 핸들링을 해본적이 있었다 ! 바로 여기서 !!!!!

전역으로 refetch하는 방법도 해당 방법과 상당히 유사한 형태로 이루어져있다.

유사한 부분을 다뤘었으니 추가 설명없이 코드로 바로 설명하겠다.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: queryErrorHandler,
      staleTime: 600000, // 10분
      cacheTime: 900000, // 15분
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },
});

해당 QueryClient의 defaultOptions는 queries 옵션에서 전역으로 에러 핸들링을 하고 

구성 요소 Mount시 refetch를 하지않고 네트워크 재연결시에도 refetch를 하지 않으며, 화면이 focus될 시에도 refetch를 하지 않게끔 전역으로 설정하였고 staleTime은 10분, cacheTime은 15분으로 전역으로 설정을 한 결과 코드이다 !!! 

쉽죠잉 ? 

 

❗ 전역으로 설정한 refetch 옵션을 오버라이딩 해보기

바로 다음으로 다뤄볼 예제는 앞서 다뤘던 전역으로 설정한 refetch 옵션을 오버라이딩 하는 예제이다.

해당 방법도 바로 코드로 살펴보겠다.

  const { data: appointments = fallback } = useQuery(
    [queryKeys.appointments, monthYear.year, monthYear.month],
    () => getAppointments(monthYear.year, monthYear.month),
    {
      select: showAll ? undefined : selectFn,
      staleTime: 0,
      cacheTime: 300000, // 5분
      refetchOnMount: true,
      refetchOnReconnect: true,
      refetchOnWindowFocus: true
    }
  );

오버라이딩 하고자하는 부분에서 3번째 인자값에 오버라이딩 하고자하는 옵션을 그대로 적어주면 끝이다 ! 

해당 예제는 구성 요소 Mount시 refetch를 하지않고 네트워크 재연결시에도 refetch를 하지 않으며, 화면이 focus될 시에도 refetch를 하지 않게끔 전역으로 설정했던 값을 전부 true로 바꿔 refetch하게 하였으며 staleTime은 10분에서 0으로, cacheTime은15분에서 5분으로 설정값을 오버라이딩 하였다.

끝.

 

❗ 폴링 : 간격에 따른 자동 refetching

다음으로 다뤄볼 예제는 refetch를 자동으로 하게하는 폴링 옵션이다.

Polling(폴링)이란? 리얼타임 웹을 위한 기법으로 일정한 주기(특정한 시간)를 가지고 서버와 응답을 주고받는 방식이 폴링 방식이다.

react-query에서는 refetchInterval, refetchIntervalInBackground을 이용해서 구현할 수 있다.

  const { data: appointments = fallback } = useQuery(
    [queryKeys.appointments, monthYear.year, monthYear.month],
    () => getAppointments(monthYear.year, monthYear.month),
    {
      select: showAll ? undefined : selectFn,
      staleTime: 0,
      cacheTime: 300000, // 5분
      refetchOnMount: true,
      refetchOnReconnect: true,
      refetchOnWindowFocus: true,
      refetchInterval: 60000, // 1분 단위로 자동 refetch
    }
  );

해당 옵션도 크게 어려울건 없다.  3번째 인자값에 refetchInterval을 추가하면 된다.

refetchInterval은 staleTime과 cacheTime과 동일하게  시간(ms)를 값으로 단위로 사용하고, 일정 시간마다 자동으로 refetch를 시켜준다.

 

해당 옵션을 사용한 상태라면 처음에는 아래 이미지 처럼 상태가 지속되다가

설정한 refetchInterval 시간의 상황이 다가왔다면

fetching 상태로 변하며 최신 데이터를 불러올 것이다.

refetchIntervalInBackground는 refetchInterval과 함께 사용하는 옵션이다. 탭/창이 백그라운드에 있는 동안 refetch 시켜준다. 즉, 브라우저에 focus되어 있지 않아도 refetch를 시켜주는 것을 의미한다.

refetchIntervalInBackground를 true로 설정하면 창이 백그라운드에 있어도 지속적으로 데이터를 가져오고 false일 경우 창이 백그라운드에 있으면 지속적으로 데이터를 가지고오지 않는다. (기본값은 false)

 

세세한 내용은 https://tanstack.com/query/v4/docs/react/reference/useQuery 해당 공식 문서를 추가적으로 참고해도 좋다 !

useQuery | TanStack Query Docs

 

끝 !!!