🐛 query invalidation 설정 (#345)

### 📝 작업 내용 - mutation 이후 query invalidation을 수행합니다. - 로그아웃 시 페이지 리로드를 수행하여 메인 페이지의 북마크 표시가 로그아웃 이후에는 나타나지 않도록 설정합니다.
wafflestudio · Feb 6, 2025 · 5849b36 · 5849b36
1 parent 0edf58e
commit 5849b36
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/apps/client/src/components/nav/GlobarNavigationBar.tsx b/apps/client/src/components/nav/GlobarNavigationBar.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { Button } from '@/components/ui/button';
 import { useGuardContext } from '@/shared/context/hooks';
@@ -58,6 +58,8 @@ export const GlobalNavigationBar = () => {
 const useLogout = () => {
   const { authService } = useGuardContext(ServiceContext);
   const { token } = useGuardContext(TokenContext);
+  const { refreshPage } = useRouteNavigation();
+  const queryClient = useQueryClient();
 
   const { mutate: logout, isPending } = useMutation({
     mutationFn: () => {
@@ -66,6 +68,12 @@ const useLogout = () => {
       }
       return authService.logout({ token });
     },
+    onSuccess: async (response) => {
+      if (response.type === 'success') {
+        await queryClient.invalidateQueries();
+        refreshPage();
+      }
+    },
   });
 
   return { logout, isPending };

diff --git a/apps/client/src/feature/company/ui/CreateCompanyForm.tsx b/apps/client/src/feature/company/ui/CreateCompanyForm.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { ImageField } from '@/components/field/ImageField';
@@ -298,6 +298,8 @@ const useCreateCompanyWithUploads = ({
 }) => {
   const { fileService, postService } = useGuardContext(ServiceContext);
   const { token } = useGuardContext(TokenContext);
+  const queryClient = useQueryClient();
+
   const [isPending, setIsPending] = useState(false);
   const { toMain } = useRouteNavigation();
 
@@ -387,8 +389,9 @@ const useCreateCompanyWithUploads = ({
       }
       return postService.createCompany({ token, companyContents });
     },
-    onSuccess: (response) => {
+    onSuccess: async (response) => {
       if (response.type === 'success') {
+        await queryClient.invalidateQueries();
         toMain();
       }
     },

diff --git a/apps/client/src/feature/landing/ui/PostCard.tsx b/apps/client/src/feature/landing/ui/PostCard.tsx
@@ -164,7 +164,7 @@ export const useAddBookmark = () => {
     },
     onSuccess: async (response) => {
       if (response.type === 'success') {
-        await queryClient.invalidateQueries({ queryKey: ['postService'] });
+        await queryClient.invalidateQueries();
         return;
       } else {
         // TODO: 북마크 생성 실패 시 하단에 토스트 띄우기

diff --git a/apps/client/src/feature/post/ui/CreatePostForm.tsx b/apps/client/src/feature/post/ui/CreatePostForm.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { MarkdownEditorField } from '@/components/field/MarkdownEditorField';
@@ -212,6 +212,7 @@ const useCreatePost = ({
 }) => {
   const { postService } = useGuardContext(ServiceContext);
   const { token } = useGuardContext(TokenContext);
+  const queryClient = useQueryClient();
 
   const { mutate: createPost, isPending } = useMutation({
     mutationFn: ({
@@ -226,8 +227,9 @@ const useCreatePost = ({
       }
       return postService.createPost({ token, companyId, postContents: post });
     },
-    onSuccess: (response) => {
+    onSuccess: async (response) => {
       if (response.type === 'success') {
+        await queryClient.invalidateQueries();
         onSuccess();
       } else {
         setResponseMessage(createErrorMessage(response.code));

diff --git a/apps/client/src/feature/resume/ui/CreateResumeForm.tsx b/apps/client/src/feature/resume/ui/CreateResumeForm.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { FormContainer } from '@/components/form';
@@ -174,6 +174,7 @@ const useCreateResume = ({
   const { resumeService } = useGuardContext(ServiceContext);
   const { token } = useGuardContext(TokenContext);
   const { toPost } = useRouteNavigation();
+  const queryClient = useQueryClient();
 
   const { mutate: createResume, isPending } = useMutation({
     mutationFn: ({ resume }: { resume: ResumeRequest }) => {
@@ -186,8 +187,9 @@ const useCreateResume = ({
         postId,
       });
     },
-    onSuccess: (response) => {
+    onSuccess: async (response) => {
       if (response.type === 'success') {
+        await queryClient.invalidateQueries();
         toPost({ postId });
       } else {
         setResponseMessage(response.code);

diff --git a/apps/client/src/shared/auth/AuthProtectedRoute.tsx b/apps/client/src/shared/auth/AuthProtectedRoute.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { Outlet } from 'react-router';
 
@@ -23,14 +23,15 @@ export const AuthProtectedRoute = () => {
 
 const useRefreshToken = () => {
   const { authService } = useGuardContext(ServiceContext);
+  const queryClient = useQueryClient();
 
   const { mutate: reissueToken } = useMutation({
     mutationFn: async () => {
       const response = await authService.reissueAccessToken();
       return response;
     },
-    onSuccess: () => {
-      return;
+    onSuccess: async () => {
+      await queryClient.invalidateQueries();
     },
     onError: () => {
       return;

diff --git a/apps/client/src/shared/auth/CompanyProtectedRoute.tsx b/apps/client/src/shared/auth/CompanyProtectedRoute.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { Outlet } from 'react-router';
 
@@ -33,14 +33,15 @@ export const CompanyProtectedRoute = () => {
 
 const useRefreshToken = () => {
   const { authService } = useGuardContext(ServiceContext);
+  const queryClient = useQueryClient();
 
   const { mutate: reissueToken } = useMutation({
     mutationFn: async () => {
       const response = await authService.reissueAccessToken();
       return response;
     },
-    onSuccess: () => {
-      return;
+    onSuccess: async () => {
+      await queryClient.invalidateQueries();
     },
     onError: () => {
       return;