hotfix: 캐싱 관련 문제 의심 항목 수정

Author: six-standard

src/apis/instance.request.ts

@@ -79,19 +79,16 @@ export const instance = async <I, R>(
         ? AbortSignal.timeout(ABORT_MS)
         : abortPolyfill(ABORT_MS),
       credentials: 'include',
+      cache: 'no-store',
     });
 
     return (data.body as unknown as SuccessType<R>).data;
   } catch (err: unknown) {
     const context = err as Response;
-    if (
-      location &&
-      !context.ok &&
-      (context.status === 401 || context.status === 403)
-    ) {
+    if (location && !context.ok && context.status === 403) {
       window.location.replace('/');
     }
-
+    //context.status === 401 ||
     setContext('Request', {
       path: context.url,
       status: context.status,

src/app/(with-tracker)/(auth-required)/layout.tsx

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { Header } from '@/components';
 import { PATHS } from '@/constants';
 import { me } from '@/apis';
 import { getQueryClient } from '@/utils/queryUtil';
+import { Header } from '@/components';
 
 interface IProp {
   children: ReactElement;

src/app/(with-tracker)/(login)/Content.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import Image from 'next/image';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Input, Button } from '@/components';
 import { LoginVo } from '@/types';
 import { login, sampleLogin } from '@/apis';
@@ -14,6 +14,7 @@ const responsiveStyle =
 
 export const Content = () => {
   const { replace } = useRouter();
+  const client = useQueryClient();
 
   const {
     register,
@@ -22,6 +23,7 @@ export const Content = () => {
   } = useForm<LoginVo>({ mode: 'all' });
 
   const onSuccess = () => {
+    client.clear();
     trackUserEvent(MessageEnum.LOGIN);
     replace('/main?asc=false&sort=');
   };

src/components/auth-required/header/index.tsx

@@ -32,20 +32,28 @@ export const Header = () => {
   const path = usePathname();
   const router = useRouter();
   const width = useResponsive();
-  const client = useQueryClient();
   const barWidth = width < SCREENS.MBI ? 65 : 180;
-
-  const { mutate: out } = useMutation({
-    mutationFn: logout,
-    onMutate: () => router.replace('/'),
-    onSuccess: () => client.removeQueries(),
-  });
+  const client = useQueryClient();
 
   const { data: profiles } = useQuery({
     queryKey: [PATHS.ME],
     queryFn: me,
   });
 
+  const { mutate: out } = useMutation({
+    mutationFn: logout,
+    onSuccess: async () => {
+      client
+        .getQueryCache()
+        .findAll()
+        .forEach((query) => {
+          client.setQueryData(query.queryKey, null);
+        });
+      client.clear();
+      router.replace('/');
+    },
+  });
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) =>
       open &&

src/components/auth-required/index.ts

@@ -1,3 +1,3 @@
-export * from './header';
+export * from './/header';
 export * from './main';
 export * from './leaderboards';

src/utils/queryUtil.ts

@@ -3,14 +3,15 @@ import { toast } from 'react-toastify';
 
 let localQueryClient: QueryClient | undefined;
 const STALE_TIME = 1000 * 60 * 3;
-const GC_TIME = 1000 * 60 * 30;
+const GC_TIME = 1000;
 
 const createQueryClient = () =>
   new QueryClient({
     defaultOptions: {
       queries: {
         retry: 1,
-        refetchOnWindowFocus: false,
+        refetchOnWindowFocus: true,
+        refetchOnMount: true,
         staleTime: STALE_TIME,
         gcTime: GC_TIME,
       },

src/utils/trackUtil.tsx

@@ -28,6 +28,7 @@ export const trackUserEvent = (event: keyof typeof MessageEnum | number) => {
     instance('/event', {
       body: { eventType },
       method: 'POST',
+      keepalive: true,
     });
   }
 };