✨Feat: queryKey

src/apis/chatRoom/useSocialData.tsx

@@ -1,16 +1,17 @@
 import { useSuspenseQueries } from '@tanstack/react-query'
 import { fetchChatRoomList } from '~apis/chatRoom/fetchChatRoomList'
 import { fetchFriendList } from '~apis/friend/fetchFriendList'
+import { queryKey } from '~constants/queryKey'
 
 export function useSocialData() {
   const results = useSuspenseQueries({
     queries: [
       {
-        queryKey: ['chatRoomList'],
+        queryKey: queryKey.social.chatRoomList(),
         queryFn: () => fetchChatRoomList().then(res => res.data),
       },
       {
-        queryKey: ['friendList'],
+        queryKey: queryKey.social.friendList(),
         queryFn: () => fetchFriendList().then(res => res.data),
       },
     ],

src/apis/member/useFetchProfile.tsx

@@ -1,9 +1,10 @@
 import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query'
 import { fetchProfile, FetchProfileResponse } from '~apis/member/fetchProfile'
+import { queryKey } from '~constants/queryKey'
 
 export const useFetchProfile = (memberId: number): UseSuspenseQueryResult<FetchProfileResponse, Error> => {
   return useSuspenseQuery<FetchProfileResponse, Error>({
-    queryKey: ['profile', memberId],
+    queryKey: queryKey.profile(memberId),
     queryFn: () => fetchProfile({ memberId }).then(data => data.data),
     staleTime: 1000 * 60 * 5, // 5분
   })

src/constants/queryKey.ts

@@ -0,0 +1,7 @@
+export const queryKey = {
+  social: {
+    chatRoomList: () => ['chatRoomList'],
+    friendList: () => ['friendList'],
+  },
+  profile: (memberId: number) => ['profile', memberId],
+}

src/pages/ProfilePage/index.tsx

@@ -16,6 +16,7 @@ import * as S from './styles'
 function ProfileContent({ id }: { id: number }) {
   const { data } = useFetchProfile(+id)
   const navigate = useNavigate()
+
   return (
     <S.ProfilePage>
       <Helmet>