Federico Pasqua (eisterman)
0552bccb02
Result: they are practically the same! Very good!!! tRPC still has better typing on Request from Client-side.
52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<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> |