[React] React-query의 staleTime, cacheTime, invalidateQueries

1. Today, What I learned?

지금 프로젝트에서 사용되고 있는 리액트 쿼리의 staleTime과 CacheTime, invalidateQueries에 대한 개념이

정립되어 있지 않은 것 같아서 한번 정리하면서 공식문서도 읽어보고.. 미래의 나를 위한 기록!..

 

공식 문서 링크는 이쪽이다.

https://tanstack.com/query/latest/docs/react/overview

Overview | TanStack Query Docs

 

 

2. staleTime

리액트 쿼리는 서버로부터 응답받는 데이터를 서버상태라고 정의한다.
이 서버상태가 신선한(fresh) 데이터로 동기화(refetch)될 수 있도록 해주는데, 아래와 같은 경우일 때 자동으로 동기화된다.

• (리액트 쿼리 훅이 포함된) 컴포넌트가 마운트 됐을 때
• 네트워크가 다시 연결됐을 때
• 다른 창에 있다가 브라우저가 다시 focus 됐을 때
• 설정한 refetch interval에 따라 다시 데이터를 호출할 때

 

staleTime은 데이터의 신선한 상태가 유지되는 시간을 말한다.
신선함의 기준은 서버 상태가 성공적으로 클라이언트에 도착한 시점부터!..
staleTime이 적용되는 시간 동안은 서버로부터 데이터가 다시 호출되지 않고, 이미 캐싱된 서버 상태를 불러온다.

 

 

🤔 그럼 staleTime이 지나면??

그때부터는 stale 상태가 되어 refetch가 필요한 상황에 refetch 되어 최신 데이터를 가져온다.

staleTime은 기본적으로 0으로 설정되어 있어서, staleTime을 설정해 주면

리액트 쿼리에게 데이터를 최신화할 기준을 심어주기 때문에 불필요한 refetch를 막을 수 있다.

 

 

2.1. react-query-devtool로 데이터의 상태 파악하기

리액트 쿼리에서 제공하는 devtool을 이용하면 데이터가 fresh 한 지 stale 한 지 한눈에 확인해 볼 수 있다! 👍

아래 같은 경우에는 3개의 데이터가 기본적으로 null값이 설정되어 있고 disbled처리가 되어있다. (로그인 후에 활성화되는 데이터들)

로그인을 하면 stale 했던 데이터들이 fresh 해진 것을 볼 수 있다. 로그인 후 관련 컴포넌트들이 다시 마운트 되면서 disabled 되어있던 것이 사라졌기 때문..

 

 

 

3. cacheTime

쿼리가 inactive 상태가 되면 cacheTIme동안 메모리에 존재하다가 가비지컬렉터로 수집되어 사라진다.

 

🤔 inactive 상태??
쿼리 훅을 사용하는 모든 컴포넌트가 언마운트 된 상태!

 

 

🤔 그럼 cacheTIme 안에 다시 쿼리가 마운트 된다면??

캐시 저장소에 있었던 값이 우선적으로 반환되지만 staleTime을 경과한 경우에는 refetch 될 수 있다!

staleTime은 서버가 클라이언트에 데이터를 가져온 시점부터 시작되지만 cacheTime은 inactive 상태부터 타이머를 시작한다는 점!..

 

 

4. invalidateQueries()

invalidateQueries는 queryClient의 메서드 중 하나다. 아래와 같이 먼저 선언이 되어있어야 사용 가능!

  const queryClient = useQueryClient();

공식 문서에 따르면 아래와 같이 캐시 안의 모든 쿼리를 무효화한다.
만약 매개변수로 쿼리키가 지정되어 있다면, 해당 쿼리키에 해당하는 쿼리만 모두 무효화된다.

// Invalidate every query in the cache
queryClient.invalidateQueries()
// Invalidate every query with a key that starts with `todos`
queryClient.invalidateQueries({ queryKey: ['todos'] })

 

 

 

🤔 예시를 들자면?

 

우리 프로젝트에 있는 관심(좋아요) 기능.
아래 뮤테이션이 실행되고 성공했을 때, 좋아요 관련 쿼리들이 갱신되어서 데이터를 뿌려줘야 하기 때문에 invalidate 되고 있다.

  const { mutate: updateMyProjectMutate } = useMutation(
    () => updateMyProject(uid, pid, isLike),
    {
      onSuccess: () => {
        queryClient.invalidateQueries(['myProjects', uid]);
        queryClient.invalidateQueries(['post', 'mostViewed']);
        queryClient.invalidateQueries(['post', 'mostLiked']);
        queryClient.invalidateQueries(['likedProjects', uid]);
      },
    },
  );

 

 

좋아요가 추가되거나 사라질 때마다 쿼리가 무효화되기 때문에

해당 데이터를 받아오는 부분에서는 useQuery가 새롭게 데이터를 가져오고, 최신의 데이터를 보여준다!

  // 유저 프로젝트 리스트 받아오는 쿼리
  const { data: userProjectListsData }: any = useQuery({
    queryKey: ['myProjects', uid],
    queryFn: getUserProjectList,
    staleTime: staleTime.myProjects,
    enabled: !!uid,
  });