<script setup lang="ts">
const { $trpc } = useNuxtApp();

const { data: hello } = await $trpc.hello.useQuery({ text: 'client' });

// Il typing sul risultato e' corretto, ma sul body no
const { data: otherHello } = await useFetch('/api/test/HELLO', {
  method: 'post',
  body: {
    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>
  <div>
    <h1>Index Page</h1>
    <div>
      <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>

<style scoped>

</style>