add useTRPCAsyncData composable

playground/app.vue

@@ -1,28 +1,20 @@
 <script setup lang="ts">
 const client = useClient()
-const { data, refresh } = await useAsyncData('getUser', () => client.query('getUsers'), {
-  server: true,
-})
 
-const addUser = async (username: string) => {
-  try {
-    await client.mutation('createUser', {
-      username,
-    })
-    refresh()
-    console.log('user added')
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
+const key = 'getUser'
+
+const { data, pending, error } = await useTRPCAsyncData(key, () => client.query(key, {
+  username: 'jcena',
+}))
 </script>
 
 <template>
   <div>
-    {{ data }}
+    <div v-if="data">
+      {{ JSON.stringify(data, null, 2) }}
+    </div>
+    <div v-else-if="error">
+      asdx  {{ JSON.stringify(error.data, null, 2) }}
+    </div>
   </div>
-  <button @click="addUser('marksx')">
-    add
-  </button>
 </template>

playground/plugins/trpc.ts

@@ -1,17 +0,0 @@
-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,7 +1,10 @@
 // ~/server/trpc/index.ts
-import { z } from 'zod'
+import { ZodError, z } from 'zod'
 import * as trpc from '@trpc/server'
 import type { inferAsyncReturnType } from '@trpc/server'
+import type { CompatibilityEvent } from 'h3'
+import type { ResponseMetaFnPayload } from 'trpc-nuxt/api'
+// import superjson from 'superjson'
 
 const fakeUsers = [
   { id: 1, username: 'jcena' },
@@ -37,9 +40,30 @@ export const router = trpc
     },
   })
 
-export const createContext = () => {
-  // ...
-  return {
-    /** context data */
-  }
+export const createContext = (event: CompatibilityEvent) => {
+  event.res.setHeader('x-ssr', 1)
+  return {}
+}
+
+export const responseMeta = (opts: ResponseMetaFnPayload<any>) => {
+  // const nuxtApp = useNuxtApp()
+  // const client = useClient()
+  // console.log(opts)
+
+  // if (nuxtApp.nuxtState) {
+  //   nuxtApp.nuxtState.trpc = client.runtime.transformer.serialize({
+  //     ctx: opts.ctx,
+  //     errors: opts.errors,
+  //   })
+  // }
+  // else {
+  //   nuxtApp.nuxtState = {
+  //     trpc: client.runtime.transformer.serialize({
+  //       ctx: opts.ctx,
+  //       errors: opts.errors,
+  //     }),
+  //   }
+  // }
+
+  return {}
 }