From 7678c959a2d09aafc8b6e84aea41b409c2e21970 Mon Sep 17 00:00:00 2001
From: barbapapazes <e.soubiran25@gmail.com>
Date: Sun, 23 Jun 2024 09:14:13 +0200
Subject: [PATCH] fix: use use-fetch to avoid to refetch during hydration

---
 app/components/content/Stats.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/content/Stats.vue b/app/components/content/Stats.vue
index 3e045ae..d58556f 100644
--- a/app/components/content/Stats.vue
+++ b/app/components/content/Stats.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Stats } from '~~/types'
 
-const stats = await $fetch<Stats>('/api/stats')
+const { data: stats }  = await useFetch<Stats>('/api/stats')
 </script>
 
 <template>
@@ -13,7 +13,9 @@ const stats = await $fetch<Stats>('/api/stats')
     }}</strong> hours.
     My best editors are
     {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
+    <template v-if="stats.os.data[0]">
     My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
+    </template>
     My top languages are
     {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
   </p>