Merge pull request #318 from prgrms-web-devcourse-final-project/refactor/queryclient-singleton

[refacto]: QueryClient를 전역 싱글톤 인스턴스로 변경

Author: kangsuyeong

src/apis/axios.ts

@@ -1,9 +1,7 @@
 import axios from 'axios';
 import { useAuthStore } from '@/store/authStore';
 import { reissueToken } from '@/apis/auth';
-import { QueryClient } from '@tanstack/react-query';
-
-const queryClient = new QueryClient();
+import { queryClient } from '@/utils';
 
 const API_BASE_URL =
   import.meta.env.MODE === 'development'
@@ -71,8 +69,7 @@ axiosInstance.interceptors.response.use(
       } catch (error) {
         useAuthStore.getState().logout();
         useAuthStore.persist.clearStorage();
-        queryClient.removeQueries({ queryKey: ['myProfile'] }); // 프로필 정보 캐시 초기화
-        queryClient.removeQueries({ queryKey: ['userPosts', 'me'] }); // 포스트 정보 캐시 초기화
+        queryClient.clear(); // 모든 쿼리, 변이 상태, 캐시 전부 제거
         console.error('AT 토큰 재발급 실패:', error);
 
         return Promise.reject(error);

src/main.tsx

@@ -1,11 +1,12 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { registerSW } from 'virtual:pwa-register';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './styles/index.css';
 import App from './App.tsx';
 import ScrollToTop from '@/components/ScrollToTop.tsx';
+import { queryClient } from '@/utils';
 
 // PWA 서비스 워커 등록
 const updateSW = registerSW({
@@ -19,9 +20,6 @@ const updateSW = registerSW({
   },
 });
 
-// 🔹 QueryClient 생성
-const queryClient = new QueryClient();
-
 createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
     <BrowserRouter>

src/utils/index.ts

@@ -1,3 +1,4 @@
+import { queryClient } from './queryClient';
 import { cn } from './cn';
 
-export { cn };
+export { cn, queryClient };

src/utils/queryClient.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();