From 4bb2cdc2d2935d9f36d235f19b63d68c5ce4a7fa Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Sat, 29 Oct 2022 22:16:06 -0700
Subject: [PATCH] save trpc server error to client

---
 playground/pages/index.vue |  2 ++
 src/client.ts              | 28 ++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index bd56eed..1327e96 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -26,6 +26,8 @@ const addTodo = async () => {
 }
 
 const { data: todos, pending, error, refresh } = await $client.todo.getTodos.query()
+
+console.log(typeof $client.todo.getTodos.query)
 </script>
 
 <template>
diff --git a/src/client.ts b/src/client.ts
index 8afdead..84857e9 100644
--- a/src/client.ts
+++ b/src/client.ts
@@ -38,18 +38,38 @@ export function createNuxtProxyDecoration<TRouter extends AnyRouter>(name: strin
     const queryKey = getQueryKey(path, input)
 
     if (lastArg === 'mutate') {
-      // @ts-ignore: nuxt internal
-      return useAsyncData(() => (client as any)[path][lastArg](input), {
+      return useAsyncDataWithError(queryKey, () => (client as any)[path][lastArg](input), {
         ...asyncDataOptions as Record<string, any>,
         immediate: false,
       })
     }
 
-    // @ts-ignore: nuxt internal
-    return useAsyncData(queryKey, () => (client as any)[path][lastArg](input), asyncDataOptions as Record<string, any>)
+    return useAsyncDataWithError(queryKey, () => (client as any)[path][lastArg](input), asyncDataOptions as Record<string, any>)
   })
 }
 
+/**
+ * Custom useAsyncData to add server error to client
+ */
+async function useAsyncDataWithError(queryKey: string, cb: any, asyncDataOptions: any) {
+  // @ts-ignore: nuxt internal
+  const serverError = useState(`error-${queryKey}`, () => null)
+  // @ts-ignore: nuxt internal
+  const { error, data, ...rest } = await useAsyncData(queryKey, cb, asyncDataOptions)
+
+  if (error.value && !serverError.value)
+    serverError.value = error.value as any
+
+  if (data.value)
+    serverError.value = null
+
+  return {
+    ...rest,
+    data,
+    error: serverError,
+  }
+}
+
 export function createTRPCNuxtProxyClient<TRouter extends AnyRouter>(opts: CreateTRPCClientOptions<TRouter>) {
   const client = createTRPCProxyClient(opts)