React-query invalidateQueries? staleTime? cacheTime?

pengooseDev·2023년 2월 19일

cacheTime invalidateQueries react-query staletime

staleTime? cacheTime? invalidateQueries?

react-query를 default setting으로 사용하다, 조금 더 공부하게 되면 발생하는 궁금증이다.
분명 셋 다 캐시 데이터를 삭제하는 것 같은데...

무슨 차이가 있는가?
그리고 언제 사용하는가?

아래의 관점만 알고가면 간단하다.

FE는 BE의 DB가 언제 바뀌는지 모른다. 내가 직접 POST 요청(useMutation)할 때 빼고.

앞의 이유로 웹에서 캐싱된 데이터는 유효한 데이터인지, 유효하지 않은 데이터(staleData)인지 알 수 없다. 따라서 데이터의 유효성이 만료되는 평균적인 시간(staleTime)을 정해서 개발자가 직접 적용하자.

알고 가야할 react-query의 컨셉

react-query는 데이터를 요청하기 전, 세 가지를 확인한다.
1. 캐시 데이터가 존재하는가?
2. 캐시 데이터의 유통기한(staleTime)이 지났는가?
3. 캐시 데이터의 파기 시간(cacheTime)이 지났는가?

1. 캐시 데이터가 존재 하는가?

캐시 데이터가 존재하면 일단 화면에 데이터를 렌더링해준다.
이후 2, 3의 유효성 검사를 한다.

2. 유통기한(staleTime)이 지났는가?

클라이언트에 캐싱되어있는 데이터는 실제 데이터가 아니다.
실제 데이터는 바뀌었을 수 있다. 따라서, 개발자는 적당한 staleTime을 설정해준다.
cache된 데이터가 클라이언트에 존재한다 하더라도, 설정해둔 staleTime이 지난 상태라면 데이터를 다시 fetch해온다.

const { data } = useQuery('users', getUsers, {
	staleTime: 5000, //default 0.
});

물론, 캐시된 데이터는 남아있기 때문에, User는 기다림없이 캐싱 되어있는 예전 데이터를 볼 수 있다. 이 데이터를 보는 사이 데이터를 다시 받아오고, 새로고침을 하면 새로 받아온 데이터가 적용되는 것이다.

default값은 0이다.
즉, default값으로 react-query를 쓸 경우, 매 요청마다 이전 요청에서 캐싱된 데이터를 먼저 보여준 뒤, 요청 결과값을 새로 캐싱한다. 데이터가 오랫동안 바뀌지 않는 경우가 아니라면,

3. 파기 시간(cacheTime)이 지났는가?

cacheTime이 지나면 캐시 데이터 자체를 삭제하고 새로 데이터를 받아온다. cacheTime이 시간이 지난 캐시 데이터는 GC에 의해 수거된다.

최근 영화를 보여주는 페이지에서 1년 전 데이터를 들고있을 이유는 없다.

const { data } = useQuery('users', getUsers, {
	staleTime: 5000, //default 0
	cacheTime: 1000 * 60 * 60, //default 300000 5분!
});

invalidateQueries?

위의 cacheTime과 staleTime은 캐시 데이터를 주기적으로 동기화 하는 방법이다.

왜 주기적으로 동기화를 하는가?

query 데이터가 바뀐지 알 수 없기 때문이다.

즉, query 데이터가 바뀌었다는 것을 정확히 알 수 있다면, 해당 시점에서 데이터를 새로 받아오는 것이 UX적으로 좋을 것이다.

FE의 action(POST, PUT, DELETE)에 의해 query 데이터가 바뀌는 것이 명확한 경우, 이전 query 데이터는 더 이상 유효하지 않다는 것이 명확하다.
이때, 사용하는 것이 invalidateQueries이다.

import { useQuery, useQueryClient } from '@tanstack/react-query'

queryClient = useQueryClient();
queryClient.invalidateQueries({ queryKey: ['todos'] });

const todoListQuery = useQuery({  
  queryKey: ['todos'],  
  queryFn: fetchTodoList,
});