feat: Setup GraphQL with dynamic node routing logic

wp-content/themes/headless/app/components/nodes/NodePage.gql

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

wp-content/themes/headless/app/components/nodes/NodePage.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import type { NodePageFragment } from "#graphql/types";
+defineProps<{ node: NodePageFragment }>();
+</script>
+
+<template>
+  <div id="node-page">{{ node.title }}</div>
+</template>

wp-content/themes/headless/app/pages/[...uri].gql

@@ -0,0 +1,8 @@
+query NodeByUri($uri: String!) {
+  nodeByUri(uri: $uri) @nonNull {
+    __typename
+    ... on Page {
+      ...NodePage
+    }
+  }
+}

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

@@ -1,5 +1,39 @@
+<script setup lang="ts">
+// Fetch node by URI and handle query errors
+const { path: uri } = useRoute();
+const { data: node, error } = await useAsyncGraphQLQuery(
+  "NodeByUri",
+  { uri },
+  {
+    transform: ({ nodeByUri }) => nodeByUri,
+  },
+);
+
+
+// Handle errors and missing nodes
+if (!node.value) {
+  console.error("NodeByUri query error:", error.value);
+  throw createError({
+    statusCode: 404,
+    message: `La page demandée est introuvable: ${uri}`,
+    fatal: true,
+  });
+}
+
+
+// Dynamically resolve component based on node type
+const componentName = `Node${node.value.__typename}`;
+if (!useNuxtApp().vueApp.component(componentName)) {
+  throw createError({
+    statusCode: 404,
+    message: `La page demandée ne peut pas être affichée correctement: ${componentName}`,
+    fatal: true,
+  });
+}
+</script>
+
 <template>
   <div id="page-node-from-uri">
-    <PageHeader title="TODO" />
+    <Component :is="componentName" :node="node" />
   </div>
 </template>