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,10 +11,31 @@ 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 (
+        <HydrationBoundary state={dehydrate(queryClient)}>
             <ProjectsContextProvider>
                 <BoardsContextProvider>
                     <StatusesContextProvider>
@@ -25,5 +51,6 @@ export default function DealsPage() {
                     </StatusesContextProvider>
                 </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 = () => {
-        queryClient
+    const fetchProjects = async () => {
+        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 } }),