update dev playground

playground/pages/index.vue

@@ -1,5 +1,23 @@
 <script setup lang="ts">
+const client = useClient()
 const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'])
+
+const addTodo = async () => {
+  const title = Math.random().toString(36).slice(2, 7)
+
+  try {
+    const result = await client.mutation('addTodo', {
+      id: Date.now(),
+      userId: 69,
+      title,
+      completed: false,
+    })
+    console.log('Todo: ', result)
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
 </script>
 
 <template>
@@ -17,6 +35,9 @@ const { data: todos, pending, error, refresh } = await useAsyncQuery(['getTodos'
         </NuxtLink>
       </li>
     </ul>
+    <button @click="addTodo">
+      Add Todo
+    </button>
     <button @click="() => refresh()">
       Refresh
     </button>

playground/server/trpc/index.ts

@@ -1,15 +1,17 @@
 import * as trpc from '@trpc/server'
 import { z } from 'zod'
 
-export interface Todo {
-  userId: number
-  id: number
-  title: string
-  completed: boolean
-}
-
 const baseURL = 'https://jsonplaceholder.typicode.com'
 
+const TodoShape = z.object({
+  userId: z.number(),
+  id: z.number(),
+  title: z.string(),
+  completed: z.boolean(),
+})
+
+export type Todo = z.infer<typeof TodoShape>
+
 export const router = trpc.router()
   .query('getTodos', {
     async resolve() {
@@ -22,3 +24,12 @@ export const router = trpc.router()
       return await $fetch<Todo>(`${baseURL}/todos/${req.input}`)
     },
   })
+  .mutation('addTodo', {
+    input: TodoShape,
+    async resolve(req) {
+      return await $fetch<Todo>(`${baseURL}/todos`, {
+        method: 'POST',
+        body: req.input,
+      })
+    },
+  })