<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">
    <Component :is="componentName" :node="node" />
  </div>
</template>
