Re-fetch
Re-fetch
Re-fetch
어떤 조건 하에서 자동적으로 다시 가져오기 된다. stale 쿼리를 사용
조건
- 새로운 쿼리 인스턴스 많아지거나
- 쿼리 키 처음 호출
- 창을 재포커스
- 만료된 데이터의 업데이터 여부를 확인할 수 있는 네트워크 다시 연결된 경우 리페칭
자주 변하지 않은 정보는 리페칭을 제한해도 된다.
but 실시간 정보는 중요하기 때문에 사용해야 한다.
리페칭을 제한하면 얻는 장점
- 불필요한 랜더링이 줄어든다
코드 작성하기 전 반드시 알아야 할 개념
- staletitme
-staleTime 만큼 시간이 지나면 데이터는 stale 상태로 변경된다.
staleTime의 default값은 0이다. 따라서 따로 설정해주지 않는다면 useQuery로 받아온 데이터는 받아오자마자 곧바로 stale 한 상태로 변하는 것을 devtools를 통해서 확인이 가능
- cacheTime
-inactive 상태인 캐시 데이터가 메모리에 남아있는 시간
cacheTime 이후에는 가비지 컬렉터에 의해 메모리에서 삭제된다.
default 값은 5분이다.
- refetchOnWindowFocus
- 데이터가 stale 상태일 경우 윈도우에 포커즈가 이동될 때마다 refetch
- refetchOnMount
- 마운트 될 때마다 refetch
- refetchOnReconnect
- 연결이 끊어졌다가 재 연결 되었을 때 refetch
async function getTreatments(): Promise<Treatment[]> {
const { data } = await axiosInstance.get('/treatments');
return data;
}
export function useTreatments(): Treatment[] {
const fallback = [];
const { data = fallback } = useQuery(queryKeys.treatments, getTreatments);
return data;
}
이 곳의 getTreatments에 리페칭을 제한하고 싶다
옵션에 staleTItme, cacheTime 등으로 리페칭에 제한을 주면 된다.
export function useTreatments(): Treatment[] {
const fallback = [];
const { data = fallback } = useQuery(queryKeys.treatments, getTreatments, {
staleTime: 600000,
cacheTime: 900000,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
});
return data;
}
이렇게 작성을 하면
다른 페이지로 넘어가도 리페칭이 제한된다.
전역으로 Re-fetch 걸기
전역적으로 리페칭을 제한하고 싶으면
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
onError: queryErrorHandler,
staleTime: 600000,
cacheTime: 900000,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
},
});
이렇게 코드를 작성하면 된다.
하지만 이렇게 작성을 하면 모든 데이터에 리페칭이 제한 되므로 데이터가 무용지물 될 수도 있고 사용자들은
원하는 정보를 얻지 못할 수 있다.
자동 Re-fetch
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
onError: queryErrorHandler,
staleTime: 600000,
cacheTime: 900000,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchInterval: 60000,
},
},
});
이렇게 코드를 작성하면 자동으로 1분마다 리페칭이 일어나게 된다.
Re-fetch
Re-fetch
어떤 조건 하에서 자동적으로 다시 가져오기 된다. stale 쿼리를 사용
조건
- 새로운 쿼리 인스턴스 많아지거나
- 쿼리 키 처음 호출
- 창을 재포커스
- 만료된 데이터의 업데이터 여부를 확인할수 있는 네트워크 다시 연결된 경우 리페칭
자주 변하지 않은 정보는 리페칭을 제한해도 된다.
but 실시간 정보는 중요하기 때문에 사용해야 한다.
리페칭을 제한하면 얻는 장점
- 불필요한 랜더링이 줄어든다
코드 작성하기 전 반드시 알아야 할 개념
- staletitme
-staleTime 만큼 시간이 지나면 데이터는 stale 상태로 변경된다.
staleTime의 default값은 0이다. 따라서 따로 설정해주지 않는다면 useQuery로 받아온 데이터는 받아오자마자 곧바로 stale 한 상태로 변하는 것을 devtools를 통해서 확인이 가능
- cacheTime
-inactive 상태인 캐시 데이터가 메모리에 남아있는 시간
cacheTime 이후에는 가비지 컬렉터에 의해 메모리에서 삭제된다.
default 값은 5분이다.
- refetchOnWindowFocus
- 데이터가 stale 상태일 경우 윈도우에 포커즈가 이동될 때마다 refetch
- refetchOnMount
- 마운트 될 때마다 refetch
- refetchOnReconnect
- 연결이 끊어졌다가 재 연결 되었을 때 refetch
async function getTreatments(): Promise<Treatment[]> {
const { data } = await axiosInstance.get('/treatments');
return data;
}
export function useTreatments(): Treatment[] {
const fallback = [];
const { data = fallback } = useQuery(queryKeys.treatments, getTreatments);
return data;
}
이 곳의 getTreatments에 리페칭을 제한하고 싶다
옵션에 staleTItme, cacheTime 등으로 리페칭에 제한을 주면 된다.
export function useTreatments(): Treatment[] {
const fallback = [];
const { data = fallback } = useQuery(queryKeys.treatments, getTreatments, {
staleTime: 600000,
cacheTime: 900000,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
});
return data;
}
이렇게 작성을 하면
다른 페이지로 넘어가도 리페칭이 제한된다.
전역으로 Re-fetch 걸기
전역적으로 리페칭을 제한하고 싶으면
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
onError: queryErrorHandler,
staleTime: 600000,
cacheTime: 900000,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
},
});
이렇게 코드를 작성하면 된다.
하지만 이렇게 작성을 하면 모든 데이터에 리페칭이 제한 되므로 데이터가 무용지물 될 수도 있고 사용자들은
원하는 정보를 얻지 못할 수 있다.
자동 Re-fetch
export const queryClient = new QueryClient({
defaultOptions: {
queries: {
onError: queryErrorHandler,
staleTime: 600000,
cacheTime: 900000,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchInterval: 60000,
},
},
});
이렇게 코드를 작성하면 자동으로 1분마다 리페칭이 일어나게 된다.