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
916 B
TypeScript
25 lines
916 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 { IGetArticlesController } from "../../interface-adapters/controllers/get-articles.controller";
|
|
import { ArticleList as ArticleListClient } from "./article-list.client";
|
|
|
|
export async function ArticleList() {
|
|
const controller = blogContainer.get<IGetArticlesController>(
|
|
BLOG_SYMBOLS.IGetArticlesController,
|
|
);
|
|
const articles = await controller({ status: "published", limit: 20 });
|
|
const queryClient = getQueryClient();
|
|
queryClient.setQueryData(
|
|
["blog", "listArticles", { input: { status: "published", limit: 20 } }],
|
|
articles,
|
|
);
|
|
|
|
return (
|
|
<HydrationBoundary state={dehydrate(queryClient)}>
|
|
<ArticleListClient />
|
|
</HydrationBoundary>
|
|
);
|
|
}
|