refactor: follow 관련 invalidateQueries 를 invalidateFollowQueries 로 분리

nodak-v2 · Jul 6, 2024 · d71f64b · d71f64b
1 parent 7719341
commit d71f64b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 36 deletions.
diff --git a/src/apis/follow.ts b/src/apis/follow.ts
@@ -1,4 +1,5 @@
 import {
+  QueryClient,
   useMutation,
   useQueryClient,
   useSuspenseQuery,
@@ -73,20 +74,26 @@ const deleteFollow = (userId: string) => {
 
 type MutationParam<T> = T extends string ? void : string;
 
+export const invalidateFollowQueries = (
+  queryClient: QueryClient,
+  userId: string,
+) => {
+  queryClient.invalidateQueries({
+    queryKey: ['profile', userId],
+  });
+  queryClient.invalidateQueries({
+    queryKey: ['followees', userId],
+  });
+};
+
 export const usePostFollowAPI = <TUserId>(initialUserId?: TUserId) => {
   const QueryClient = useQueryClient();
 
   const { mutateAsync } = useMutation({
     mutationFn: (userId: MutationParam<TUserId>) =>
       postFollow((initialUserId ?? userId) as string),
-    onSuccess: () => {
-      QueryClient.invalidateQueries({
-        queryKey: ['profile', initialUserId],
-      });
-      QueryClient.invalidateQueries({
-        queryKey: ['followees', initialUserId],
-      });
-    },
+    onSuccess: () =>
+      invalidateFollowQueries(QueryClient, initialUserId as string),
   });
 
   return mutateAsync;
@@ -98,14 +105,8 @@ export const useDeleteFollowAPI = <TUserId>(initialUserId?: TUserId) => {
   const { mutateAsync } = useMutation({
     mutationFn: (userId: MutationParam<TUserId>) =>
       deleteFollow((initialUserId ?? userId) as string),
-    onSuccess: () => {
-      QueryClient.invalidateQueries({
-        queryKey: ['profile', initialUserId],
-      });
-      QueryClient.invalidateQueries({
-        queryKey: ['followees', initialUserId],
-      });
-    },
+    onSuccess: () =>
+      invalidateFollowQueries(QueryClient, initialUserId as string),
   });
 
   return mutateAsync;

diff --git a/src/app/social/_components/FollowList.tsx b/src/app/social/_components/FollowList.tsx
@@ -1,6 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query';
 
-import { useDeleteFollowAPI, usePostFollowAPI } from '@/src/apis/follow';
+import {
+  invalidateFollowQueries,
+  useDeleteFollowAPI,
+  usePostFollowAPI,
+} from '@/src/apis/follow';
 import ProfileBlock from '@/src/app/social/_components/ProfileBlock';
 import Button from '@/src/components/Button/Button';
 
@@ -17,31 +21,16 @@ const FollowList = ({ users }: UserListProps) => {
   const postFollow = usePostFollowAPI();
   const deleteFollow = useDeleteFollowAPI();
 
-  const QueryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-  const handlePostFollowClick = (userId: number) => () => {
+  const handlePostFollowClick = (userId: number) => () =>
     postFollow(userId.toString(), {
-      onSuccess: () => {
-        QueryClient.invalidateQueries({
-          queryKey: ['profile', userId],
-        });
-        QueryClient.invalidateQueries({
-          queryKey: ['followees', userId],
-        });
-      },
+      onSuccess: () => invalidateFollowQueries(queryClient, userId.toString()),
     });
-  };
 
   const handleDeleteFollowClick = (userId: number) => () =>
     deleteFollow(userId.toString(), {
-      onSuccess: () => {
-        QueryClient.invalidateQueries({
-          queryKey: ['profile', userId],
-        });
-        QueryClient.invalidateQueries({
-          queryKey: ['followees', userId],
-        });
-      },
+      onSuccess: () => invalidateFollowQueries(queryClient, userId.toString()),
     });
 
   return (