feat: ssr prefetch of projects and boards

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>
+        <HydrationBoundary state={dehydrate(queryClient)}>
-            <BoardsContextProvider>
+            <ProjectsContextProvider>
-                <StatusesContextProvider>
+                <BoardsContextProvider>
-                    <PageContainer>
+                    <StatusesContextProvider>
-                        <PageBlock className={"mobile-margin-height"}>
+                        <PageContainer>
-                            <Header />
+                            <PageBlock className={"mobile-margin-height"}>
-                            <Space h={"md"} />
+                                <Header />
-                            <DealsContextProvider>
+                                <Space h={"md"} />
-                                <Funnel />
+                                <DealsContextProvider>
-                            </DealsContextProvider>
+                                    <Funnel />
-                        </PageBlock>
+                                </DealsContextProvider>
-                    </PageContainer>
+                            </PageBlock>
-                </StatusesContextProvider>
+                        </PageContainer>
-            </BoardsContextProvider>
+                    </StatusesContextProvider>
-        </ProjectsContextProvider>
+                </BoardsContextProvider>
+            </ProjectsContextProvider>
+        </HydrationBoundary>
     );
 }

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 } }),

src/hooks/lists/useProjectsList.ts

@@ -8,8 +8,8 @@ const useProjectsList = () => {
 
     const [projects, setProjects] = useState<ProjectSchema[]>([]);
 
-    const fetchProjects = () => {
+    const fetchProjects = async () => {
-        queryClient
+        return queryClient
             .fetchQuery({
                 ...getProjectsOptions(),
             })

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 } }),