feat: dynamic useGraphqlRouteQuery

Author: dulnan

package-lock.json

@@ -48,6 +48,7 @@
     "access": "public"
   },
   "dependencies": {
+    "change-case": "^5.4.4",
     "fzf": "^0.5.2",
     "yaml": "^2.4.1"
   },

package.json

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

playground/app/components/Node/Page/fragment.graphql

@@ -0,0 +1,3 @@
+<template>
+  <div>Template for a page node</div>
+</template>

playground/app/components/Node/Page/index.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from '#imports'
+import { useDrupalRouteQuery, useRoute } from '#imports'
 
 const route = useRoute()
+
+const { entity } = await useDrupalRouteQuery('routeNodeCanonical')
 </script>

playground/app/pages/[...slug].vue

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
   ssr: false,
+  devtools: {
+    enabled: true,
+  },
   modules: [
     'nuxt-graphql-middleware',
     '../src/module',
@@ -71,6 +74,11 @@ export default defineNuxtConfig({
     },
     drupalRoute: {
       enabled: true,
+      routeQueries: {
+        nodeCanonical: {
+          fragments: ['nodePage'],
+        },
+      },
     },
     languageSwitchLinks: {
       enabled: true,

playground/nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineVuepalFeature({
     )
 
     helper.addComposable('useBreadcrumb')
+    helper.addComponent('VuepalBreadcrumb')
     helper.addPlugin('breadcrumb')
     helper.addGraphqlFile('fragment.breadcrumb.graphql')
   },

src/build/features/breadcrumb/index.ts

@@ -1,9 +1,16 @@
 import { defineVuepalFeature } from '../defineFeature'
+import { pascalCase, camelCase } from 'change-case'
 
-export default defineVuepalFeature({
+type DrupalRouteDefinition = {
+  fragments: string[]
+}
+
+export default defineVuepalFeature<{
+  routeQueries?: Record<string, DrupalRouteDefinition>
+}>({
   name: 'drupalRoute',
   description: 'Adds routing related GraphQL queries and composables.',
-  setup(helper) {
+  setup(helper, options) {
     helper
       .assertGraphqlObjectField({ extension: 'routing' }, 'Query', 'route')
       .assertGraphqlObjectField(
@@ -18,10 +25,15 @@ export default defineVuepalFeature({
 
     helper.addComposable('useDrupalRoute')
     helper.addComposable('buildDrupalMetatags')
+
+    helper.addGraphqlFile('fragment.metatag.graphql')
+
+    // Conditionally add the breadcrumb on the route fragment.
     const breadcrumbSpread = helper.hasFeatureEnabled('breadcrumb')
       ? 'breadcrumb { ...breadcrumb }'
       : ''
 
+    // Conditionally add the languageSwitchLinks on the route fragment.
     const languageSwitchLinksSpread = helper.hasFeatureEnabled(
       'languageSwitchLinks',
     )
@@ -72,16 +84,101 @@ fragment useDrupalRoute on Query {
     }
   }
 }
+`,
+    )
+
+    const routeQueries = Object.entries(options?.routeQueries || {})
+
+    if (helper.isModuleBuild) {
+      routeQueries.push([
+        'nodeCanonical',
+        {
+          fragments: ['nodePage'],
+        },
+      ])
+    }
+
+    if (!routeQueries.length) {
+      return
+    }
+
+    helper.addComposable('useDrupalRouteQuery')
 
-fragment metatag on Metatag {
-  id
-  tag
-  attributes {
-    key
-    value
+    helper.addTemplate(
+      'route-queries',
+      () => {
+        const mapping = routeQueries.reduce<Record<string, string>>(
+          (acc, [name]) => {
+            acc[name] = camelCase('route_' + name)
+            return acc
+          },
+          {},
+        )
+        return `
+export const mapping = ${JSON.stringify(mapping, null, 2)}
+`
+      },
+      () => {
+        const imports = [
+          ...new Set(routeQueries.flatMap((v) => v[1].fragments)).values(),
+        ]
+          .map((fragmentName) => {
+            return pascalCase(fragmentName + 'Fragment')
+          })
+          .join(',\n  ')
+        const importStatement = `import type {\n  ${imports}\n} from '#graphql-operations'`
+        const queries = routeQueries
+          .map(([name, definition]) => {
+            const fragments = definition.fragments
+              .map((v) => pascalCase(v + 'Fragment'))
+              .join(' | ')
+            return `"${name}": ${fragments}`
+          })
+          .join(',\n  ')
+
+        const possibleQueryNames = routeQueries
+          .map(([name]) => {
+            return `'${camelCase('route_' + name)}'`
+          })
+          .join(' | ')
+
+        return `
+${importStatement}
+import type { Query } from '#nuxt-graphql-middleware/operation-types'
+
+declare module '#vuepal-build/route-queries' {
+  export type DrupalRouteQueries = {
+    ${queries}
   }
+  type PossibleQueryNames = ${possibleQueryNames}
+  export const mapping: Record<keyof DrupalRouteQueries, keyof Pick<Query, PossibleQueryNames>>;
 }
-`,
+`
+      },
     )
+
+    // Generate GraphQL queries.
+    routeQueries.forEach(([name, definition]) => {
+      const queryName = camelCase('route_' + name)
+
+      const spreads = definition.fragments
+        .map((v) => '...' + v)
+        .join('\n        ')
+      helper.graphql.addDocument(
+        'vuepal-route-query:' + name,
+        `
+query ${queryName}($path: String!) {
+  ...useDrupalRoute
+  route(path: $path) {
+    ... on EntityUrl {
+      entity {
+        __typename
+        ${spreads}
+      }
+    }
+  }
+}`,
+      )
+    })
   },
 })

src/build/features/drupalRoute/index.ts

@@ -1,4 +1,4 @@
-import type { SerializableHead, Link } from '@unhead/vue'
+import type { Link } from '@unhead/vue'
 import type { HookResult } from '@nuxt/schema'
 import type { RouteLocationRaw } from 'vue-router'
 import type { UseDrupalRouteFragment } from '#graphql-operations'
@@ -14,6 +14,7 @@ import {
   type ComputedRef,
   type Ref,
 } from '#imports'
+import type { DrupalRoute, UseDrupalRoute } from './../../helpers/drupalRoute'
 
 type DrupalRouteMetatags = {
   title: string
@@ -30,33 +31,6 @@ type Options = {
   noError?: boolean
 }
 
-type DrupalRoute = {
-  /**
-   * The name of the route, e.g. "entity.node.canonical".
-   */
-  name?: string
-
-  /**
-   * The bundle of the entity, e.g. "page".
-   */
-  entityBundle?: string
-
-  /**
-   * The entity type, e.g. "node".
-   */
-  entityType?: string
-
-  /**
-   * The ID of the entity.
-   */
-  entityId?: string
-
-  /**
-   * The UUID of the entity.
-   */
-  entityUuid?: string
-}
-
 type DrupalRouteHookPayload = {
   /**
    * The Nuxt route path for which the useDrupalRoute composable was called.
@@ -67,23 +41,6 @@ type DrupalRouteHookPayload = {
   metatags: DrupalRouteMetatags
 }
 
-type UseDrupalRoute<T> = {
-  /**
-   * The user-specific fields for the entity, according to their fragment.
-   */
-  entity: ComputedRef<T>
-
-  /**
-   * The Drupal route information.
-   */
-  drupalRoute: ComputedRef<DrupalRoute>
-
-  /**
-   * The mapped meta tags.
-   */
-  metatags: ComputedRef<SerializableHead>
-}
-
 type UseDrupalRouteQueryInput =
   | UseDrupalRouteFragment
   | ComputedRef<UseDrupalRouteFragment | undefined | null>