React Query 공부 (10) Re-fetching

상황

지주 변하지 않는 데이터임에도 불구하고 계속해서 refetch 되는 것은 낭비이다.
이를 따로 설정하여 refetch를 억누를 필요가 있다.

re-fetch의 조건

• react-query가 포함되어있는 컴포넌트가 재실행될 때
• 다른 페이지를 보고 있다가 다시 해당 웹페이지에 focus 될 때
• 네트워크가 재연결될 때
• stale time이 지났을 때
• 설정한 refetchInterval이 지났을 때

refetch default options

공식문서
refetch를 설정하는 default option들이 존재한다.

• refetchOnMount (boolean)
• refetchOnWindowFocus (boolean)
• refetchOnReconnet(boolean)
• refetchInterval(ms)

필요한 상황을 판단하여 잘 사용해야 한다.

상황 판단

즉각적인 업데이트가 필요없는 데이터인 경우와 즉각적인 업데이트가 필요한 데이터를 구별할 필요가 있다.

나 같은 경우 즉각적인 업데이트가 필요없는 데이터인 경우가 많고 즉각적인 업데이트가 필요한 데이터가 소수였기 때문에 query들의 default option에 즉각적인 refetch를 억누르는 설정을 추가했다.

• query client의 default option으로 모든 query들의 즉각적인 업데이트를 제한
• 즉각적인 업데이트가 필요한 useQuery만 별도로 설정

global option 적용(즉각적인 업데이트 필요x)

• stale time
  - 600,000ms 즉 10분으로 설정(default는 0) => 이 데이터는 10분까지는 fresh하다는 의미
• cache time
  - 900,000ms 즉 15분으로 설정(default는 5분)
  • stale time이 cache time을 넘기면 안된다. 기존에 있던 캐시는 데이터를 refetch하는 동안 사용자에게 보여주는 데이터인데, 먼저 만료가 되면 refetch하는 동안 사용자에게 보여주는 데이터가 사라져버린다.
• refetchOnMount (boolean)
  - 캐시에 있는 상황에서 refetch 할 지 안할 지 결정하는 옵션이다.
  - 즉각적인 업데이트가 필요없는 데이터일 때는 false로 설정(default는 true)
• refetchOnWindowFocus (boolean)
  - 페이지를 focus할 때 refetch 할 지 안할 지 결정하는 옵션
  - default는 true이고 이 또한 false로 설정
• refetchOnReconnet(boolean)
  - 네트워크 재연결되었을 때 refetch 할 지 안할 지 결정하는 옵션
  - default는 true이고 이 또한 false로 설정

// queryClient.ts
// 즉각적인 업데이트가 필요없는 경우가 많기 때문에 default option으로 설정
export const queryClient = new QueryClient({
	defaultOptions: {
    	queries: {
        	staleTime: 600000, // 10분
            cacheTime: 900000, // 15분
            refetchOnMount: false,
            refetchOnWindowFocus: false,
            refetchOnReconnect: false

        }
    }
})

즉각적인 업데이트 필요한 query는 따로 설정

즉각적인 업데이트가 필요한 데이터를 유저의 작업 없이 주기적으로 refetch 하려 한다.
refetchInterval이라는 useQuery 옵션을 사용하여 구현한다.

global default option으로 설정해준 값을 다시 default 값으로 재설정해주고
refetchInterval는 설정한 시간을 ms단위로 refetch해준다.

이를 Polling 통신이라고 한다.
위키에서 컴퓨터 과학에서의 "폴링(polling)이란 하나의 장치(또는 프로그램)가 충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식"이라 정의한다.

쉽게 말하면 데이터 refetch를 위해 프로그램의 상태를 주기적으로 검사하는 행위이며, 이 작업을 refetchInterval이 해주고 있는 것이다. 예를 들어 1000ms, 즉 1초마다 polling 통신을 하고 조건이 맞으면 refetch 요청을 하는 것을 의미한다.

// 즉각적인 업데이트가 필요한 데이터인 경우
const { data : appointments = fallback} = useQuery(queryKeys, queryFn, {
    staleTime: 0, // default값으로 재설정
    cacheTime: 300000, // default값(5분)으로 재설정
    refetchOnMount:true,
    refetchOnReconnect: true,
    refetchOnWindowFocus: true,
	refetchInterval: 1000 // every second refetch
  })