feat: ssr prefetch of projects and boards

This commit is contained in:
2025-08-26 12:03:36 +04:00
parent e0f86f2018
commit 5b5c2fe230
4 changed files with 55 additions and 20 deletions

View File

@ -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>
);
}