test trpc

src/pages/index.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { useThemeStore } from '~/store/theme'
-import { ColorsTheme } from '~~/types'
 
 const { getColor, getTheme, nextColor, nextTheme } = useThemeStore()
 const { getThemeTextColor, getThemeBackgroundColor } = useTheme()
+
+const { query } = useRoute()
+const { $trpc } = useNuxtApp()
+const user = await $trpc.hello.query({ name: query.name?.toString() })
 </script>
 
 <template>
@@ -29,5 +32,8 @@ const { getThemeTextColor, getThemeBackgroundColor } = useTheme()
     <div @click="nextTheme()">
       setNextTheme()
     </div>
+    <div>
+      {{ user.greeting }}
+    </div>
   </section>
 </template>

src/plugins/trpc.ts

@@ -1,3 +1,4 @@
+import { loggerLink } from '@trpc/client'
 import SuperJSON from 'superjson'
 import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
 import type { AppRouter } from '~/server/trpc/routers'
@@ -6,6 +7,11 @@ export default defineNuxtPlugin(() => {
   const trpc = createTRPCNuxtClient<AppRouter>({
     transformer: SuperJSON,
     links: [
+      loggerLink({
+        enabled: opts =>
+          process.env.NODE_ENV === 'development'
+          || (opts.direction === 'down' && opts.result instanceof Error),
+      }),
       httpBatchLink({
         url: '/api/trpc',
       }),

src/server/trpc/routers/index.ts

@@ -1,7 +1,16 @@
-import { router } from '~/server/trpc/trpc'
+import { z } from 'zod'
+import { publicProcedure, router } from '~/server/trpc/trpc'
 
 export const appRouter = router({
-
+  hello: publicProcedure
+    .input(z.object({
+      name: z.string().optional(),
+    }))
+    .query(({ input }) => {
+      return {
+        greeting: `Hello ${input.name ?? 'world'}!`,
+      }
+    }),
 })
 
 export type AppRouter = typeof appRouter