From 0552bccb021bb5d2e74acc9e3d16211531d1460a Mon Sep 17 00:00:00 2001
From: "Federico Pasqua (eisterman)" <federico.pasqua.96@gmail.com>
Date: Thu, 3 Apr 2025 19:46:58 +0200
Subject: [PATCH] Extend experiments with loading client-side

Result: they are practically the same! Very good!!! tRPC still has better typing on Request from Client-side.
---
 pages/index.vue | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/pages/index.vue b/pages/index.vue
index e5f2184..ba14c87 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -10,6 +10,24 @@ const { data: otherHello } = await useFetch('/api/test/HELLO', {
     world: 'MONDO'
   }
 });
+
+const clientSide = ref<{
+  trpcData: string,
+  fetchData: string,
+} | null>(null);
+
+async function loadNewData() {
+  const [{ data: a1 }, { data: b1 }] = await Promise.all([
+    $trpc.hello.useQuery({ text: 'client' }),
+    useFetch('/api/test/HELLO', {
+      method: 'post',
+      body: {
+        world: 'MONDO'
+      }
+    })
+  ]);
+  clientSide.value = { trpcData: a1.value?.greeting ?? 'no', fetchData: b1.value?.risultato ?? 'no2' };
+}
 </script>
 
 <template>
@@ -19,6 +37,13 @@ const { data: otherHello } = await useFetch('/api/test/HELLO', {
       <p>RPC Client output: {{ hello }}</p>
       <p>Nuxt API output: {{ otherHello?.risultato }}</p>
     </div>
+    <div>
+      <button @click="loadNewData">Carica ClientSide</button>
+      <div v-if="clientSide">
+        <p>{{ clientSide.trpcData }}</p>
+        <p>{{ clientSide.fetchData }}</p>
+      </div>
+    </div>
   </div>
 </template>