Merge pull request #26 from CS3219-AY2425S1/feature/initial-qns-prefetch

feature/enhancements: Add prefetch for question list page

Author: SeeuSim

frontend/src/lib/router.tsx

@@ -7,11 +7,11 @@ import { RouteGuard, loader as routeGuardLoader } from '@/components/blocks/rout
 import { ForgotPassword } from '@/routes/forgot-password';
 import { Login } from '@/routes/login';
 import { QuestionDetails, loader as questionDetailsLoader } from '@/routes/questions/details';
+import { Questions, loader as questionsLoader } from '@/routes/questions/main';
 import { SignUp } from '@/routes/signup';
 
 import { queryClient } from './query-client';
 import { ROUTES } from './routes';
-import { Questions } from '@/routes/questions/main';
 
 export const router = createBrowserRouter([
   {
@@ -27,6 +27,7 @@ export const router = createBrowserRouter([
             children: [
               {
                 path: ROUTES.QUESTIONS,
+                loader: questionsLoader(queryClient),
                 element: <Questions />,
               },
               {

frontend/src/routes/questions/details/index.ts

@@ -0,0 +1 @@
+export * from './main';

frontend/src/routes/questions/details.tsx renamed to frontend/src/routes/questions/details/main.tsx

@@ -0,0 +1 @@
+export * from './main';

frontend/src/routes/questions/index.ts

@@ -1,16 +1,40 @@
-import { useEffect, useMemo } from 'react';
-import { columns } from './table-columns';
-import { QuestionTable } from './question-table';
-import { useInfiniteQuery } from '@tanstack/react-query';
-import { IGetQuestionsResponse } from '@/types/question-types';
-import { useCrumbs } from '@/lib/hooks/use-crumbs';
+import { queryOptions, useInfiniteQuery, type QueryClient } from '@tanstack/react-query';
+import { Suspense, useEffect, useMemo } from 'react';
+import { Await, defer, useLoaderData, type LoaderFunctionArgs } from 'react-router-dom';
+
 import { WithNavBanner } from '@/components/blocks/authed/with-nav-banner';
+import { Loading } from '@/components/blocks/loading';
+import { useCrumbs } from '@/lib/hooks/use-crumbs';
 import { fetchQuestions, ROWS_PER_PAGE } from '@/services/question-service';
+import type { IGetQuestionsResponse } from '@/types/question-types';
+
+import { QuestionTable } from './question-table';
+import { columns } from './table-columns';
+
+const getListQuestionsQueryConfig = (pageNumber?: number) =>
+  queryOptions({
+    queryKey: ['qn', 'list', pageNumber],
+    queryFn: async ({ signal: _ }) => fetchQuestions(pageNumber),
+  });
+
+export const loader =
+  (queryClient: QueryClient) =>
+  async ({ params: _ }: LoaderFunctionArgs) => {
+    return defer({
+      initialPage: queryClient.ensureQueryData(getListQuestionsQueryConfig()),
+    });
+  };
+
+type IQuestionListServiceAPIResponse = Awaited<ReturnType<typeof fetchQuestions>>;
+type IQuestionLoaderReturn = Awaited<ReturnType<ReturnType<typeof loader>>>['data'];
+type IQuestionLoaderData = { initialPage?: IQuestionListServiceAPIResponse };
 
 export function Questions() {
   const { crumbs } = useCrumbs();
 
-  const { data, error, fetchNextPage, hasNextPage, isError, isFetchingNextPage } = useInfiniteQuery<
+  const initialData = useLoaderData() as IQuestionLoaderReturn as IQuestionLoaderData;
+
+  const { data, fetchNextPage, hasNextPage, isError, isFetchingNextPage } = useInfiniteQuery<
     IGetQuestionsResponse,
     Error
   >({
@@ -22,12 +46,12 @@ export function Questions() {
       const totalPages = Math.ceil(lastPage.totalQuestions / ROWS_PER_PAGE);
       return nextPage < totalPages ? nextPage : undefined;
     },
+    initialData: {
+      pages: initialData?.initialPage?.questions ? [initialData.initialPage] : [],
+      pageParams: initialData?.initialPage?.questions ? [0] : [],
+    },
   });
 
-  if (isError) {
-    console.log(error);
-  }
-
   useEffect(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -37,14 +61,20 @@ export function Questions() {
   const questions = useMemo(() => {
     if (data) {
       return data.pages.flatMap((page) => page.questions);
+    } else if (initialData?.initialPage?.questions) {
+      return initialData.initialPage.questions;
     }
     return [];
-  }, [data]);
+  }, [data, initialData]);
 
   return (
     <WithNavBanner crumbs={crumbs}>
       <div className='container mx-auto py-3'>
-        <QuestionTable columns={columns} data={questions} isError={isError} />
+        <Suspense fallback={<Loading />}>
+          <Await resolve={initialData.initialPage}>
+            <QuestionTable columns={columns} data={questions} isError={isError} />
+          </Await>
+        </Suspense>
       </div>
     </WithNavBanner>
   );