From e0749bfff50024cec2f10b4a3c8ba83e02b3d55d Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Mon, 19 Aug 2024 13:27:07 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20loader=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=A0=95=EB=B3=B4=20prefetch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/src/hooks/query/useGetUserInfo.ts | 18 ++++++++++-------- packages/user/src/routes/loader/index.ts | 10 +++++++++- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/user/src/hooks/query/useGetUserInfo.ts b/packages/user/src/hooks/query/useGetUserInfo.ts index e8457db0..6649f6d7 100644 --- 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({ - queryKey: [QUERY_KEYS.USER_INFO, token], - queryFn: () => http.get('/user-info'), - enabled: isAuthenticated, - }); + } = useQuery(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('/user-info'), + enabled: Boolean(token), +}); diff --git a/packages/user/src/routes/loader/index.ts b/packages/user/src/routes/loader/index.ts index f8c80299..b66d8161 100644 --- 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'; @@ -8,11 +11,16 @@ export default async function indexLoader() { await queryClient.prefetchQuery(eventDurationQueryOptions); const duration = queryClient.getQueryData([QUERY_KEYS.EVENT_DURATION]); - if (!duration) { throw new CustomError('이벤트 기간 데이터를 불러올 수 없습니다.', 500); } + const token = Cookie.getCookie(ACCESS_TOKEN_KEY); + + if (token) { + await queryClient.prefetchQuery(userInfoQueryOptions(token)); + } + const currentTime = new Date(); const startTime = new Date(duration.startTime); From d3787e3bdd2430d6f0eb9bf6a503dc80497d089d Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Mon, 19 Aug 2024 13:27:32 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20global=20loading=20component=20?= =?UTF-8?q?=EB=88=84=EB=9D=BD=EB=90=9C=20=EB=B6=80=EB=B6=84=20=EB=8B=A4?= =?UTF-8?q?=EC=8B=9C=20=EC=B1=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/user/src/App.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/user/src/App.tsx b/packages/user/src/App.tsx index 449a01ad..d8c0c5d7 100644 --- a/packages/user/src/App.tsx +++ b/packages/user/src/App.tsx @@ -1,6 +1,7 @@ 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'; @@ -8,12 +9,12 @@ import useCursor from './hooks/useCursor.ts'; export default function App() { useCursor(); + return ( <> - {/* TODO: create global loading component */} - loading...} /> + } /> From dc7fe3acfcc20ebfe5daf57840e814726e21f2b1 Mon Sep 17 00:00:00 2001 From: nimod7890 Date: Mon, 19 Aug 2024 13:37:39 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20prefetch=20=EB=A1=9C=EC=A7=81=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/user/src/routes/loader/index.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/user/src/routes/loader/index.ts b/packages/user/src/routes/loader/index.ts index b66d8161..bf462af0 100644 --- a/packages/user/src/routes/loader/index.ts +++ b/packages/user/src/routes/loader/index.ts @@ -11,16 +11,11 @@ export default async function indexLoader() { await queryClient.prefetchQuery(eventDurationQueryOptions); const duration = queryClient.getQueryData([QUERY_KEYS.EVENT_DURATION]); + if (!duration) { throw new CustomError('이벤트 기간 데이터를 불러올 수 없습니다.', 500); } - const token = Cookie.getCookie(ACCESS_TOKEN_KEY); - - if (token) { - await queryClient.prefetchQuery(userInfoQueryOptions(token)); - } - const currentTime = new Date(); const startTime = new Date(duration.startTime); @@ -28,5 +23,11 @@ export default async function indexLoader() { throw new CustomError('이벤트가 아직 시작되지 않았습니다.', 403); } + const token = Cookie.getCookie(ACCESS_TOKEN_KEY); + + if (token) { + await queryClient.prefetchQuery(userInfoQueryOptions(token)); + } + return defer({ duration }); }