refactor: TanStack Query 캐싱 정책 도입 및 QueryClient 인스턴스 고정 - #18
Conversation
staleTime이 설정되지 않아 페이지 이동마다 동일 데이터를 재요청하던 문제를 해결한다. 도메인 특성에 따라 staleTime을 분리하고 전역 기본 캐싱 정책을 추가한다. QueryClient가 렌더마다 재생성되어 캐시가 버려질 수 있는 구조도 useState로 고정한다.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces domain-specific staleTime configurations for various TanStack Query hooks and wraps the QueryClient instantiation in useState within TanStackProvider to prevent unnecessary cache resets on re-renders. The feedback points out a potential issue where the global DEFAULT_GC_TIME (10 minutes) is shorter than the staleTime for MY_INFO (30 minutes), which would cause the cache to be garbage collected prematurely. It is recommended to increase DEFAULT_GC_TIME to at least 30 minutes to ensure the cache is preserved as expected.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
gcTime(10분)이 MY_INFO의 staleTime(30분)보다 짧아 비활성 쿼리의 캐시가 먼저 수거되던 문제를 해결한다.
2 participants
개요 💡
TanStack Query에
staleTime이 설정되어 있지 않아, 페이지를 이동할 때마다 이미 받아온 데이터를 매번 다시 요청하고 있었습니다. 도메인별 캐싱 정책을 도입해 불필요한 API 호출을 줄입니다.작업내용 ⌨️
1. 도메인별 캐싱 정책 도입 (
shared/constants/queryOptions.ts)데이터 성격에 따라
staleTime을 분리했습니다. 모든 쿼리에 동일한 값을 주면 실시간성이 중요한 세탁기 상태가 오래된 값으로 보이거나, 거의 바뀌지 않는 목록을 불필요하게 재요청하게 됩니다.전역 기본값으로
staleTime1분,gcTime10분을 설정했습니다.2. QueryClient 인스턴스 고정 (
shared/lib/TanStackProvider.tsx)new QueryClient()가 컴포넌트 본문에서 호출되고 있어, 리렌더가 발생하면 캐시가 통째로 버려질 수 있는 구조였습니다.useState로 인스턴스를 고정했습니다.계측 결과 📊
axios 요청 인터셉터에 임시 카운터를 붙여, 고정 시나리오(대시보드 → 세탁기 → 예약 → 신고 → 사용자 → 대시보드 → 세탁기 → 예약) 기준으로 측정했습니다. 계측용 코드는 이 PR에 포함되지 않습니다.
staleTime없음)재방문 구간에서 발생하던 중복 요청이 제거되어 약 84% 감소했습니다.
검증 ✅
pnpm lint— 통과 (기존 쿠키 유틸 관련 경고 2건은 이 변경과 무관)pnpm check-types— 통과pnpm build— 통과