From d9333f2189582ec983bd3a4ab46d0d0e354b0c39 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Fri, 12 Apr 2024 16:14:02 +0200
Subject: [PATCH] debug fetching global data error page on ssg

---
 app.vue                           | 12 +++---------
 components/Header.vue             | 26 +++++++++++++-------------
 composables/useFetchGlobalData.js | 11 +++++++++++
 error.vue                         | 27 ++++++++++-----------------
 nuxt.config.ts                    |  5 +++++
 pages/contact.vue                 |  9 +++++----
 pages/index.vue                   | 10 +++++++---
 pages/magasin.vue                 |  6 +++---
 server/api/[...].ts               |  2 +-
 9 files changed, 58 insertions(+), 50 deletions(-)
 create mode 100644 composables/useFetchGlobalData.js

diff --git a/app.vue b/app.vue
index 9722e43..97b609c 100644
--- a/app.vue
+++ b/app.vue
@@ -1,17 +1,11 @@
 <template>
   <Header />
-  <main>
-    <NuxtPage />
-  </main>
+  <NuxtPage />
 </template>
 
 <script setup>
-    let globalData = useState('globalData');
-    
-    await callOnce(async () => {
-      globalData.value = await $fetch('/api/items/global')
-      globalData = globalData.value.data
-    })
+    let globalData = await useFetchGlobalData();
+    globalData = globalData.globalData._object.$sglobalData;
 
     useSeoMeta({
       ogImage: '/card.jpg',
diff --git a/components/Header.vue b/components/Header.vue
index c0f0f02..09f96cc 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -32,21 +32,21 @@
 </template>
 
 <script>
-    export default {
-        setup() {
-            let globalData = useState('globalData');
-            globalData = globalData.value.data;
-            
-            return {
-                globalData
-            };
+export default {
+    async setup() {
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
+        return {
+            globalData
+        };
+    },
+    methods: {
+        isActive(path) {
+            return this.$route.path === path;
         },
-        methods: {
-            isActive(path) {
-                return this.$route.path === path;
-            },
-        }
     }
+}
 </script>
 
 <style lang="scss">
diff --git a/composables/useFetchGlobalData.js b/composables/useFetchGlobalData.js
new file mode 100644
index 0000000..0f087a9
--- /dev/null
+++ b/composables/useFetchGlobalData.js
@@ -0,0 +1,11 @@
+export const useFetchGlobalData = async () => {
+  const globalData = useState('globalData', () => {})
+
+  await callOnce(async () => {
+    globalData.value = await $fetch(`/api/items/global`)
+    globalData.value = globalData.value.data
+  })
+  return {
+    globalData
+  }
+}
\ No newline at end of file
diff --git a/error.vue b/error.vue
index 1a96d9c..c2af036 100644
--- a/error.vue
+++ b/error.vue
@@ -2,32 +2,25 @@
     <Header />
     <div class="error-page">
       <h1 v-if="error.statusCode === 404">Erreur 404</h1>
+      <h1 v-else>Erreur {{ error.statusCode }}</h1>
       <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
       <img 
-            v-if="globalData != null"
             :src="`/api/assets/${globalData.error_img}.webp`"
-            :alt="global.error_img_title" />
+            :alt="globalData.error_img_title" />
     </div>
 </template>
   
 <script>
 export default {
-  setup() {
-    let globalData = useState('globalData');
-
-    async function fetchGlobalData() {
-      await callOnce(async () => {
-        globalData.value = await $fetch('/api/items/global')
-        globalData = globalData.value.data;
-      })
-    }
-
-    fetchGlobalData();    
+    async setup() {
+      let globalData = await useFetchGlobalData();
+      globalData = globalData.globalData._object.$sglobalData;
       
-    return {
-      globalData
-    }
-  },
+      return {
+          globalData
+      }
+      
+    },
     props: {
       error: Object
     }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 670859d..78a1f7a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -50,6 +50,11 @@ export default defineNuxtConfig({
         }
       },
     },
+    prerender: {
+      routes: [
+        '/api/items/global'
+      ]
+    },
   },
   hooks: {
     'nitro:build:public-assets': () => {
diff --git a/pages/contact.vue b/pages/contact.vue
index 53d60ba..eb33e26 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -15,10 +15,11 @@
 
 <script>
 export default {
-    setup() {
-        let globalData = useState('globalData');
-        globalData = globalData.value.data;
-    
+    async setup() {
+
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
         return {
             globalData
         }
diff --git a/pages/index.vue b/pages/index.vue
index c5a6b50..f50371c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,17 +14,21 @@ export default {
     setup() {
         const itemsAccueil = ref([]);
 
-        const { data: itemsData, error: itemsError } = useFetch('/api/items/images_accueil', { server: true });
+        const { data: itemsData } = useFetch('/api/items/images_accueil', { server: true });
         
         onMounted(async () => {
-            if (!itemsError.value && itemsData.value) {
+            if (itemsData.value) {
                 itemsAccueil.value = itemsData.value.data;
+                setTimeout(() => {
+                    startSlider();
+                }, 1);
             }
         });
 
+        
+
         return {
             itemsAccueil,
-            itemsError
         };
 
 
diff --git a/pages/magasin.vue b/pages/magasin.vue
index 8b305fd..84ec7d2 100644
--- a/pages/magasin.vue
+++ b/pages/magasin.vue
@@ -9,7 +9,7 @@
 import Projects from '@/components/Projects.vue';
 
 export default {
-    setup() {
+    async setup() {
         const magasin = ref([]);
 
         const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
@@ -20,8 +20,8 @@ export default {
             }
         });
 
-        let globalData = useState('globalData');
-        globalData = globalData.value.data;
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData,
diff --git a/server/api/[...].ts b/server/api/[...].ts
index 8ec395e..359273e 100644
--- a/server/api/[...].ts
+++ b/server/api/[...].ts
@@ -8,7 +8,7 @@ import { joinURL } from 'ufo'
 export default defineEventHandler(async (event) => {
     const proxyUrl = useRuntimeConfig().apiURL    
     
-    if (event.path.startsWith('/api')) {
+    if (event.path.startsWith('/api')) {        
         const path = event.path.replace(/^\/api\//, '')
 
         const target = joinURL(proxyUrl, path)