update readme

playground/app.vue

@@ -1,18 +1,28 @@
 <script setup lang="ts">
 const client = useClient()
-const { data, error } = await useAsyncData('getUser', () => client.query('getUser', {
-  username: 'asd',
-}), {
+const { data, refresh } = await useAsyncData('getUser', () => client.query('getUsers'), {
   server: true,
 })
 
-watchEffect(() => {
-  console.log(process.server, error.value)
-})
+const addUser = async (username: string) => {
+  try {
+    await client.mutation('createUser', {
+      username,
+    })
+    refresh()
+    console.log('user added')
+  }
+  catch (error) {
+    console.log(error)
+  }
+}
 </script>
 
 <template>
   <div>
-    {{ error }}
+    {{ data }}
   </div>
+  <button @click="addUser('marksx')">
+    add
+  </button>
 </template>

playground/nuxt.config.ts

@@ -4,6 +4,9 @@ import Module from '..'
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: [Module],
+  runtimeConfig: {
+    baseURL: 'http://localhost:3000',
+  },
   typescript: {
     strict: true,
   },

playground/plugins/trpc.ts

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // if (process.server) {
+  //   nuxtApp.hooks.hook('app:rendered', () => {
+  //     nuxtApp.ssrContext['']
+  //   })
+  // }
+
+  // if (process.client) {
+  //   nuxtApp.hooks.hook('app:created', () => {
+  //     console.log('app:created')
+  //   })
+  // }
+  if (nuxtApp.ssrContext)
+    console.log('hello', nuxtApp.ssrContext)
+})

playground/server/trpc/index.ts

@@ -1,21 +1,45 @@
 // ~/server/trpc/index.ts
 import { z } from 'zod'
 import * as trpc from '@trpc/server'
+import type { inferAsyncReturnType } from '@trpc/server'
 
 const fakeUsers = [
-  { id: 1, username: 'jcena', name: 'John Cena' },
-  { id: 2, username: 'dbatista', name: 'Dave Batista' },
-  { id: 3, username: 'jbiden', name: 'Joe Biden' },
+  { id: 1, username: 'jcena' },
+  { id: 2, username: 'dbatista' },
+  { id: 3, username: 'jbiden' },
 ]
 
 export const router = trpc
-  .router()
+  .router<inferAsyncReturnType<typeof createContext>>()
+  .query('getUsers', {
+    resolve() {
+      return fakeUsers
+    },
+  })
   .query('getUser', {
     // validate input with Zod
     input: z.object({
       username: z.string().min(5),
     }),
     resolve(req) {
-      return fakeUsers.find(i => i.username === req.input.username)
+      return fakeUsers.find(i => i.username === req.input.username) ?? null
     },
   })
+  .mutation('createUser', {
+    input: z.object({ username: z.string().min(5) }),
+    resolve(req) {
+      const newUser = {
+        id: fakeUsers.length + 1,
+        username: req.input.username,
+      }
+      fakeUsers.push(newUser)
+      return newUser
+    },
+  })
+
+export const createContext = () => {
+  // ...
+  return {
+    /** context data */
+  }
+}