multitenant-ecommerce/src/app/(app)/(home)/[category]/page.tsx

import type { SearchParams } from 'nuqs/server';
import { dehydrate, HydrationBoundary } from '@tanstack/react-query';

import { getQueryClient, trpc } from '@/trpc/server';
import { loadProductFilters } from '@/modules/products/search-params';
import { ProductListView } from '@/modules/products/ui/views/product-list-view';

interface Props {
	params: Promise<{
		category: string;
	}>,
	searchParams: Promise<SearchParams>;
}

const Page = async ({ params, searchParams }: Props) => {
	const { category } = await params;
	const queryClient = getQueryClient();
	const filters = await loadProductFilters(searchParams);

	void queryClient.prefetchQuery(
		trpc.products.getMany.queryOptions({
			category,
			...filters,
		})
	);

	return (
		<HydrationBoundary state={dehydrate(queryClient)}>
			<ProductListView category={category} />
		</HydrationBoundary>
	);
};

export default Page;