Tanstack Query 의 캐싱에 대하여

Tanstack Query 는 캐싱을 제공한다. 공식 문서에 useQuery 훅을 사용하여 데이터 캐싱과 관리 방법을 간단한 예시로 설명하고 있어서 정리해 보았다.

 

예시 

• useQuery 훅을 통해 ['todos'] 쿼리 키를 사용하는 쿼리를 실행
• fetchTodos 함수로 네트워크 요청을 통한 데이터 받기
• gcTime 은 5분, staleTime 는 0초로 설정

위의 조건대로 기본 상황을 설정하였으며, 해당 조건을 토대로 캐싱이 어떻게 이루어지고 데이터가 삭제되는 과정을 알아보자.

 

단계별 설명

1. 처음 실행

• useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 을 처음 호출하면 아직 캐시된 데이터가 없다. 그러므로 로딩 상태를 보여주고 네트워크로 요청을 보낸다. 이때 제공되는 isLoading 로 로딩 중임을 표시해 주면 된다.
• 네트워크 요청이 완료되면 가져온 데이터를 'todos' 라는 키로 캐시된다. 
• staleTime 가 0으로 설정되어 있으므로, 데이터를 가져온 직후에 stale 상태가 된다. 

2. 두 번째 실행 

두 번째는 캐시된 데이터가 있는 상태에서 다시 같은 요청을 할 때의 설명이다. 

• 다른 곳에서 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 을 다시 호출하면 'todos' 키로 캐시된 데이터를 즉시 불러온다.
• 이후이도 계속 fetchTodos 함수를 실행해도 캐시된 데이터를 먼저 반환하고 staleTime 이 0초 이므로 백그라운드에서 최신 데이터를 가져온다.

3. 언마운트

• useQuery({ queryKey: ['todos'], queryFn: fetchTodos })를 사용하여 데이터를 가져오던 모든 컴포넌트가 언마운트되면 해당 쿼리가 더이상 사용되지 않는 상태가 된다.
• 이때 gcTime 5분으로 설정되어 있으므로, 5분 동안 데이터를 캐시하고 이후에는 삭제된다. 중요한 점은 gcTime 은 요청 직후 흘러가는 것이 아닌, 쿼리가 비활성 상태가 되면 그때부터 흐르게 되는 것이다.

 

4. 캐시 만료 전 새로운 쿼리 실행

• 캐시 만료 시간인 5분이 지나기 전에 또 같은 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) 쿼리를 다시 호출하면, 캬사애 있던 데이터를 먼저 사용하고 fetchTodos 함수를 백그라운드에서 실행하여 최신 데이터를 가져온다. 
• 캐시 시간이 5분인데 왜 요청을 또 하느냐? 그 이유는 캐시는 5분으로 설정했지만 staleTime 은 0초 이므로 캐시된 데이터가 이미 오래된 데이터로 간주하기 때문이다. 
• 새로운 데이터가 받아지면 캐시와 화면의 데이터가 다시 최신 상태로 업데이트된다.

 

참고 자료

제가 공부한 내용은 아래 문서에서 확인할 수 이며, 해당 문서 내용 기반으로 정리한 글입니다.

https://tanstack.com/query/v5/docs/framework/react/guides/caching

TanStack | High Quality Open-Source Software for Web Developers

---

잘못된 정보가 있다면 지적부탁드립니다. 🥺