refactor: data fetching for page navigation

wp-content/themes/ccat/app/composables/useNodeByUri.ts

@@ -1,32 +1,30 @@
 import type { ThePageFragment, TheArticleFragment, TheEventFragment, TheLocationFragment, TheMembershipFragment, TheProjectFragment, TheResourceFragment } from "#graphql-operations";
 import { ThePage, TheArticle, TheEvent, TheLocation, TheMembership, TheProject, TheResource } from "#components";
 
-export async function useNodeByUri() {
-  const route = useRoute();
-  const uri = computed(() => route.path);
-  const { data } = await useAsyncGraphqlQuery("nodeByUri", { uri: uri.value }, { graphqlCaching: { client: true } });
-  if (data.value?.errors?.length) {
-    throw createError({ statusCode: 500, message: "Erreur lors de la récupération du contenu", fatal: true });
-  }
+export async function useNodeByUri(uri: string) {
+  const { data, error } = await useAsyncGraphqlQuery("nodeByUri", { uri }, { graphqlCaching: { client: true } });
   const node = data.value?.data.nodeByUri;
-  const breadcrumbs = node?.breadcrumbs?.map(({ label, to }) => ({ label, to: to || undefined })) || [];
-
-  switch (node?.__typename) {
-    case "Page":
-      return { component: ThePage, node: node as ThePageFragment, breadcrumbs };
-    case "Post":
-      return { component: TheArticle, node: node as TheArticleFragment, breadcrumbs };
+  if (error.value || !node) {
+    const message = error.value?.message || "Erreur lors de la récupération du contenu";
+    throw createError({ statusCode: 500, message });
+  }
+  const breadcrumbs = node.breadcrumbs?.map(({ label, to }) => ({ label, to: to || undefined })) || [];
+  switch (node.__typename) {
     case "Event":
       return { component: TheEvent, node: node as TheEventFragment, breadcrumbs };
     case "Location":
       return { component: TheLocation, node: node as TheLocationFragment, breadcrumbs };
     case "Membership":
       return { component: TheMembership, node: node as TheMembershipFragment, breadcrumbs };
+    case "Page":
+      return { component: ThePage, node: node as ThePageFragment, breadcrumbs };
+    case "Post":
+      return { component: TheArticle, node: node as TheArticleFragment, breadcrumbs };
     case "Project":
       return { component: TheProject, node: node as TheProjectFragment, breadcrumbs };
     case "Resource":
       return { component: TheResource, node: node as TheResourceFragment, breadcrumbs };
     default:
-      throw createError({ statusCode: 404, message: "Page non trouvée", fatal: true });
+      throw createError({ statusCode: 404, message: "Page non trouvée" });
   }
 }

wp-content/themes/ccat/app/pages/[...uri].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const { node, component, breadcrumbs } = await useNodeByUri();
+const { path } = useRoute();
+const { node, component, breadcrumbs } = await useNodeByUri(path);
 useSeoMeta({ title: node?.title });
 </script>