feat: Initial useNodeByUri

wp-content/themes/ccat/app/components/nodes/ThePage.fragment.gql

@@ -0,0 +1,3 @@
+fragment ThePage on Page {
+  title
+}

wp-content/themes/ccat/app/components/nodes/ThePage.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { ThePageFragment } from "#graphql-operations";
+
+defineProps<{ node: ThePageFragment }>();
+</script>
+
+<template>
+  <UPage>
+    <UPageSection v-if="node.title" :title="node.title" />
+  </UPage>
+</template>

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

@@ -0,0 +1,9 @@
+query nodeByUri($uri: String!) {
+  nodeByUri(uri: $uri) {
+    __typename
+    id
+    ... on Page {
+      ...ThePage
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { ThePageFragment } from "#graphql-operations";
+import { ThePage } 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 });
+  }
+  const node = data.value?.data.nodeByUri;
+  switch (node?.__typename) {
+    case "Page":
+      return { component: ThePage, node: node as ThePageFragment };
+    default:
+      throw createError({ statusCode: 404, message: "Page non trouvée", fatal: true });
+  }
+}

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

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const { node, component } = await useNodeByUri();
+useSeoMeta({ title: node?.title });
+</script>
+
+<template>
+  <component :is="component" :node="node" />
+</template>

wp-content/themes/ccat/app/pages/index.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-useSeoMeta({ title: "Accueil" });
-</script>
-
-<template>
-  <UPage>
-    <UPageHero title="Nuxt UI rocks" />
-  </UPage>
-</template>