7ef0411ffa
Server components (.server.tsx) resolve controllers from DI, prefetch data, and wrap client components in HydrationBoundary. Client components (.client.tsx) use hooks for hydration + background refetch. Barrel exports server components under clean names — consumers never see the server/client split.
25 lines
933 B
TypeScript
25 lines
933 B
TypeScript
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
|
|
import { getQueryClient } from "@repo/core-trpc";
|
|
import { blogContainer } from "../../di/container";
|
|
import { BLOG_SYMBOLS } from "../../di/symbols";
|
|
import type { IGetArticleBySlugController } from "../../interface-adapters/controllers/get-article-by-slug.controller";
|
|
import { ArticleDetail as ArticleDetailClient } from "./article-detail.client";
|
|
|
|
export async function ArticleDetail({ slug }: { slug: string }) {
|
|
const controller = blogContainer.get<IGetArticleBySlugController>(
|
|
BLOG_SYMBOLS.IGetArticleBySlugController,
|
|
);
|
|
const article = await controller({ slug });
|
|
const queryClient = getQueryClient();
|
|
queryClient.setQueryData(
|
|
["blog", "articleBySlug", { input: { slug } }],
|
|
article,
|
|
);
|
|
|
|
return (
|
|
<HydrationBoundary state={dehydrate(queryClient)}>
|
|
<ArticleDetailClient slug={slug} />
|
|
</HydrationBoundary>
|
|
);
|
|
}
|