Complete Throwing Responses

pages/contacts/[contactId].vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
-// const route = useRoute();
+const { $trpc } = useNuxtApp();
-// route.params.contactId
+const route = useRoute();
 
-const contact = ref({
+const { data: contact } = await $trpc.contactGet.useQuery({ contactId: `${route.params.contactId}` });
-  first: "Your",
+if (contact.value === null) throw createError({ statusCode: 404, statusMessage: 'Not Found' });
-  last: "Name",
-  avatar: "https://placecats.com/200/200",
-  twitter: "your_handle",
-  notes: "Some notes",
-  favorite: true,
-});
 
 function deleteSubmit(event: Event) {
   const response = window.confirm(

server/trpc/routers/index.ts

@@ -1,6 +1,6 @@
 import { publicProcedure, router } from '~/server/trpc/init';
 import { z } from 'zod';
-import { getContacts } from "~/server/utils/data";
+import { getContact, getContacts } from "~/server/utils/data";
 
 export const appRouter = router({
   hello: publicProcedure.input(
@@ -14,7 +14,12 @@ export const appRouter = router({
   }),
   contactList: publicProcedure.query(async () => {
     return await getContacts();
-  })
+  }),
+  contactGet: publicProcedure.input(
+    z.object({ contactId: z.string() })
+  ).query(async (opts) => {
+    return await getContact(opts.input.contactId);
+  }),
 });
 
 // export type definition of API