From 5b5c2fe23099840ea8d30a2c80976d1cff9b799e Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Tue, 26 Aug 2025 12:03:36 +0400
Subject: [PATCH] feat: ssr prefetch of projects and boards

---
 src/app/deals/page.tsx             | 59 ++++++++++++++++++++++--------
 src/hooks/lists/useDealsList.ts    |  6 ++-
 src/hooks/lists/useProjectsList.ts |  4 +-
 src/hooks/lists/useStatusesList.ts |  6 ++-
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
index 69ae860..a71aa15 100644
--- a/src/app/deals/page.tsx
+++ b/src/app/deals/page.tsx
@@ -1,3 +1,8 @@
+import {
+    dehydrate,
+    HydrationBoundary,
+    QueryClient,
+} from "@tanstack/react-query";
 import { Space } from "@mantine/core";
 import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
 import Header from "@/app/deals/components/shared/Header/Header";
@@ -6,24 +11,46 @@ import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
 import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
 import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import PageContainer from "@/components/layout/PageContainer/PageContainer";
+import {
+    getBoardsOptions,
+    getProjectsOptions,
+} from "@/lib/client/@tanstack/react-query.gen";
 import { DealsContextProvider } from "./contexts/DealsContext";
 
-export default function DealsPage() {
+async function prefetchData() {
+    const queryClient = new QueryClient();
+    const projectsData = await queryClient.fetchQuery(getProjectsOptions());
+
+    const firstProjectId = projectsData.projects?.[0]?.id;
+    if (!firstProjectId) return queryClient;
+
+    await queryClient.prefetchQuery(
+        getBoardsOptions({ path: { projectId: firstProjectId } })
+    );
+
+    return queryClient;
+}
+
+export default async function DealsPage() {
+    const queryClient = await prefetchData();
+
     return (
-        <ProjectsContextProvider>
-            <BoardsContextProvider>
-                <StatusesContextProvider>
-                    <PageContainer>
-                        <PageBlock className={"mobile-margin-height"}>
-                            <Header />
-                            <Space h={"md"} />
-                            <DealsContextProvider>
-                                <Funnel />
-                            </DealsContextProvider>
-                        </PageBlock>
-                    </PageContainer>
-                </StatusesContextProvider>
-            </BoardsContextProvider>
-        </ProjectsContextProvider>
+        <HydrationBoundary state={dehydrate(queryClient)}>
+            <ProjectsContextProvider>
+                <BoardsContextProvider>
+                    <StatusesContextProvider>
+                        <PageContainer>
+                            <PageBlock className={"mobile-margin-height"}>
+                                <Header />
+                                <Space h={"md"} />
+                                <DealsContextProvider>
+                                    <Funnel />
+                                </DealsContextProvider>
+                            </PageBlock>
+                        </PageContainer>
+                    </StatusesContextProvider>
+                </BoardsContextProvider>
+            </ProjectsContextProvider>
+        </HydrationBoundary>
     );
 }
diff --git a/src/hooks/lists/useDealsList.ts b/src/hooks/lists/useDealsList.ts
index 98d6770..63c5a87 100644
--- a/src/hooks/lists/useDealsList.ts
+++ b/src/hooks/lists/useDealsList.ts
@@ -13,7 +13,11 @@ const useDealsList = ({ boardId }: Props) => {
     const queryClient = useQueryClient();
 
     const fetchDeals = () => {
-        if (!boardId) return;
+        if (!boardId) {
+            setDeals([]);
+            return;
+        }
+
         queryClient
             .fetchQuery({
                 ...getDealsOptions({ path: { boardId } }),
diff --git a/src/hooks/lists/useProjectsList.ts b/src/hooks/lists/useProjectsList.ts
index e89eda5..fa9916d 100644
--- a/src/hooks/lists/useProjectsList.ts
+++ b/src/hooks/lists/useProjectsList.ts
@@ -8,8 +8,8 @@ const useProjectsList = () => {
 
     const [projects, setProjects] = useState<ProjectSchema[]>([]);
 
-    const fetchProjects = () => {
-        queryClient
+    const fetchProjects = async () => {
+        return queryClient
             .fetchQuery({
                 ...getProjectsOptions(),
             })
diff --git a/src/hooks/lists/useStatusesList.ts b/src/hooks/lists/useStatusesList.ts
index c4d1e50..4879cab 100644
--- a/src/hooks/lists/useStatusesList.ts
+++ b/src/hooks/lists/useStatusesList.ts
@@ -13,7 +13,11 @@ const useStatusesList = ({ boardId }: Props) => {
     const [statuses, setStatuses] = useState<StatusSchema[]>([]);
 
     const fetchStatuses = () => {
-        if (!boardId) return;
+        if (!boardId) {
+            setStatuses([]);
+            return;
+        }
+        
         queryClient
             .fetchQuery({
                 ...getStatusesOptions({ path: { boardId } }),