trpc demo

src/app/cv/_components/CvCategory.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { trpc } from "~/app/_trpc/Client"
+import CvEntry, { type CvEntryProps } from "./CvEntry"
+import type { servTrpc } from "~/app/_trpc/ServerClient"
+type CvCategoryProps = {
+  initialData: Awaited<ReturnType<typeof servTrpc.cvCategory.get>>,
+  children?: React.ReactElement<CvEntryProps>
+} 
+export default function CvCategory(props:CvCategoryProps)  {
+  const cvCategories = trpc.cvCategory.get.useQuery(undefined,{
+  	initialData: props.initialData,
+  	refetchOnMount: false,
+  	refetchOnReconnect: false,
+  });
+	return (
+		<div>
+			{cvCategories.data.map((cat) => {
+				return (
+					<div key={cat.id}>
+						{cat.name}
+					</div>
+				)
+			})}
+		</div>
+	) 
+}

src/app/cv/_components/CvEntry.tsx

@@ -0,0 +1,7 @@
+import type { cvEntry } from "~/server/db/schema"
+
+export type CvEntryProps = typeof cvEntry
+
+export default function CvEntry(cvEntry: CvEntryProps) {
+	return (<></>) 
+}

src/app/cv/_components/CvLayout.tsx

@@ -0,0 +1,3 @@
+export default function CvLayout({children,}: Readonly<{ children: React.ReactNode }>) {
+	return (<></>) 
+}

src/app/cv/page.tsx

@@ -1,18 +1,10 @@
-import { getCvCategories } from "~/server/db/query"
-
+import { servTrpc } from "~/app/_trpc/ServerClient"
+import CvCategory from "./_components/CvCategory";
 export default async function CvPage() {
-  const cvCategories = await getCvCategories(); 
+  const cvCategories = await servTrpc.cvCategory.get();
   return (
-    <div>
-      {cvCategories.map((category) => {
-        return (
-          <div key={category.id}>
-            <div>
-              {category.name}
-            </div>
-          </div>
-        )
-      })}
-    </div>
+    <CvCategory initialData={cvCategories}>
+      <></>
+    </CvCategory>
   )
 }