[25.02.28 / TASK-116,TASK-103] Modify - 캐시 충돌 문제 해결

src/apis/instance.request.ts

@@ -75,10 +75,9 @@ export const instance = async <I, R>(
     return (data.body as unknown as SuccessType<R>).data;
   } catch (err: unknown) {
     const context = err as Response;
-    if (location && !context.ok && context.status === 403) {
+    if (location && !context.ok && context.status === 401) {
       window.location.replace('/');
     }
-    //context.status === 401 ||
     setContext('Request', {
       path: context.url,
       status: context.status,

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, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { Input, Button } from '@/components';
 import { LoginVo } from '@/types';
 import { login, sampleLogin } from '@/apis';
@@ -14,7 +14,6 @@ const responsiveStyle =
 
 export const Content = () => {
   const { replace } = useRouter();
-  const client = useQueryClient();
 
   const {
     register,
@@ -23,7 +22,6 @@ 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

@@ -9,6 +9,8 @@ import { NameType } from '@/components';
 import { useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { revalidate } from '@/utils/revalidateUtil';
+
 import { defaultStyle, Section, textStyle } from './Section';
 
 const PARAMS = {
@@ -37,13 +39,19 @@ export const Header = () => {
 
   const { mutate: out } = useMutation({
     mutationFn: logout,
-    onMutate: () => router.replace('/'),
-    onSuccess: () => client.removeQueries(),
+    onSuccess: async () => {
+      await revalidate();
+      client.clear();
+      router.replace('/');
+    },
   });
 
   const { data: profiles } = useQuery({
     queryKey: [PATHS.ME],
     queryFn: me,
+    enabled: !!client.getQueryData([PATHS.ME]),
+    // 로그아웃 후 리렌더링되어 다시 fetch되는 경우 해결
+    // 어차피 prefetch를 통해 데이터를 불러온 상태에서 렌더하기 때문에, 캐시 여부만 판단하면 됨
   });
 
   useEffect(() => {

src/components/auth-required/main/Section/index.tsx

@@ -1,27 +1,22 @@
 'use client';
 
-import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import { UserNameNotFoundError } from '@/errors';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { parseNumber } from '@/utils/numberUtil';
 import { COLORS, env, PATHS } from '@/constants';
 import { PostType, UserDto } from '@/types';
 import { Icon } from '@/components';
+import { getQueryClient } from '@/utils/queryUtil';
 import { Graph } from './Graph';
 
 export const Section = (p: PostType) => {
   const [open, setOpen] = useState(false);
-  const client = useQueryClient();
 
-  const { username } = client.getQueryData([PATHS.ME]) as UserDto;
-  const URL = env.VELOG_URL;
+  const username = (
+    getQueryClient().getQueryData([PATHS.ME]) as Partial<UserDto>
+  )?.username;
 
-  if (!username) {
-    throw new UserNameNotFoundError();
-  }
-
-  const url = `${URL}/@${username}/${p.slug}`;
+  const url = `${env.VELOG_URL}/@${username}/${p.slug}`;
 
   return (
     <section className="flex flex-col w-full h-fit relative">

src/utils/queryUtil.ts

@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 let localQueryClient: QueryClient | undefined;
 const STALE_TIME = 1000 * 60 * 3;
-const GC_TIME = 1000;
+const GC_TIME = 1000 * 60 * 20;
 
 const createQueryClient = () =>
   new QueryClient({

src/utils/revalidateUtil.ts

@@ -0,0 +1,9 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+export async function revalidate() {
+  revalidatePath('/', 'layout');
+  redirect('/');
+}