Merge pull request #86 from softeerbootcamp4th/prefetch-user

[Feature] 유저 정보 prefetch (react-router-dom loader)
softeerbootcamp4th · Aug 19, 2024 · 0d2fa85 · 0d2fa85
2 parents feb5246 + dc7fe3a
commit 0d2fa85
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/packages/user/src/App.tsx b/packages/user/src/App.tsx
@@ -1,19 +1,20 @@
 import { RouterProvider } from 'react-router-dom';
 import ToasterStack from 'src/components/common/toast/ToasterStack.tsx';
 import GlobalErrorBoundary from 'src/components/layout/GlobalErrorBoundary.tsx';
+import LayoutSuspenseFallback from 'src/components/layout/LayoutSuspenseFallback.tsx';
 import AppProviders from 'src/libs/index.tsx';
 import router from 'src/routes/router.tsx';
 import CasperCursor from './components/cursor/CasperCursor.tsx';
 import useCursor from './hooks/useCursor.ts';
 
 export default function App() {
 	useCursor();
+
 	return (
 		<>
 			<AppProviders>
 				<GlobalErrorBoundary>
-					{/* TODO: create global loading component */}
-					<RouterProvider router={router} fallbackElement={<>loading...</>} />
+					<RouterProvider router={router} fallbackElement={<LayoutSuspenseFallback />} />
 				</GlobalErrorBoundary>
 				<ToasterStack />
 			</AppProviders>

diff --git a/packages/user/src/hooks/query/useGetUserInfo.ts b/packages/user/src/hooks/query/useGetUserInfo.ts
@@ -6,25 +6,21 @@ import http from 'src/services/api/index.ts';
 import QUERY_KEYS from 'src/services/api/queryKey.ts';
 import CustomError from 'src/utils/error.ts';
 
-export type UserResponse = {
+export interface UserInfoResponse {
 	userId: string;
 	userName: string;
 	team: ServerCategoryEnum | null;
 	url: string | null;
-};
+}
 
 export default function useGetUserInfo() {
-	const { isAuthenticated, token, clearAuthData } = useAuth();
+	const { token, clearAuthData } = useAuth();
 
 	const {
 		data: userInfo,
 		status,
 		...props
-	} = useQuery<UserResponse>({
-		queryKey: [QUERY_KEYS.USER_INFO, token],
-		queryFn: () => http.get('/user-info'),
-		enabled: isAuthenticated,
-	});
+	} = useQuery<UserInfoResponse>(userInfoQueryOptions(token));
 
 	useEffect(() => {
 		if (status === 'error') {
@@ -35,3 +31,9 @@ export default function useGetUserInfo() {
 
 	return { userInfo, ...props };
 }
+
+export const userInfoQueryOptions = (token: string | null) => ({
+	queryKey: [QUERY_KEYS.USER_INFO, token],
+	queryFn: () => http.get<UserInfoResponse>('/user-info'),
+	enabled: Boolean(token),
+});
diff --git a/packages/user/src/routes/loader/index.ts b/packages/user/src/routes/loader/index.ts
@@ -1,5 +1,8 @@
+import { ACCESS_TOKEN_KEY } from '@softeer/common/constants';
+import { Cookie } from '@softeer/common/utils';
 import { defer } from 'react-router-dom';
 import { EventDuration, eventDurationQueryOptions } from 'src/hooks/query/useGetEventDuration.ts';
+import { userInfoQueryOptions } from 'src/hooks/query/useGetUserInfo.ts';
 import { queryClient } from 'src/libs/query/index.tsx';
 import QUERY_KEYS from 'src/services/api/queryKey.ts';
 import CustomError from 'src/utils/error.ts';
@@ -20,5 +23,11 @@ export default async function indexLoader() {
 		throw new CustomError('이벤트가 아직 시작되지 않았습니다.', 403);
 	}
 
+	const token = Cookie.getCookie<string | null>(ACCESS_TOKEN_KEY);
+
+	if (token) {
+		await queryClient.prefetchQuery(userInfoQueryOptions(token));
+	}
+
 	return defer({ duration });
 }