feat: improve route queries, types

Author: dulnan

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepal",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "Nuxt+Vue Drupal Integration",
   "license": "MIT",
   "homepage": "https://github.com/liip/vuepal",
@@ -50,8 +50,8 @@
   "dependencies": {
     "change-case": "^5.4.4",
     "fzf": "^0.5.2",
-    "nuxt-graphql-middleware": "^5.0.0-alpha.19",
-    "nuxt-language-negotiation": "^2.0.0-alpha.1",
+    "nuxt-graphql-middleware": "^5.0.0-alpha.20",
+    "nuxt-language-negotiation": "^2.0.0-alpha.2",
     "yaml": "^2.4.1"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,20 @@
+fragment nodeContact on NodeContact {
+  __typename
+  title
+  uuid
+}
+
+fragment nodePressRelease on NodePressRelease {
+  __typename
+  title
+  uuid
+  date: fieldDate {
+    formatted(drupalDateFormat: OLIVERO_MEDIUM)
+  }
+  lead: fieldLead
+  contact: fieldContact {
+    name: label
+    jobTitle: fieldJobTitle
+    mail: fieldEmail
+  }
+}

playground/app/components/Node/fragment.graphql

@@ -9,5 +9,5 @@ import { useDrupalRouteQuery, useRoute } from '#imports'
 
 const route = useRoute()
 
-const { entity } = await useDrupalRouteQuery('routeNodeCanonical')
+const { entity } = await useDrupalRouteQuery('nodeCanonical')
 </script>

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

@@ -10,11 +10,9 @@ import { definePageMeta } from '#imports'
 definePageMeta({
   name: 'contact-page',
   drupalFrontendRoute: true,
+  path: '/kontakt',
   languageMapping: {
-    de: '/de/kontakt',
-    fr: '/fr/contactez-nous',
-    en: '/en/contact-us',
-    it: '/it/conatactio',
+    en: '/contact-us',
   },
 })
 </script>

playground/app/pages/contact/index.vue

@@ -8,10 +8,9 @@ import { definePageMeta } from '#imports'
 definePageMeta({
   name: 'search',
   drupalFrontendRoute: true,
+  path: '/suche',
   languageMapping: {
-    de: '/de/suche',
-    fr: '/fr/chercher',
-    en: '/en/search',
+    en: '/search',
   },
 })
 </script>

playground/app/pages/search.vue

@@ -79,7 +79,7 @@ export default defineNuxtConfig({
       enabled: true,
       routeQueries: {
         nodeCanonical: {
-          fragments: ['nodePage'],
+          fragments: ['nodePage'] as never[],
         },
       },
     },

playground/nuxt.config.ts

@@ -96,20 +96,6 @@ export class ModuleHelper {
       }
     })
 
-    // Gather all aliases for each layer.
-    const layerAliases = nuxt.options._layers.map((layer) => {
-      // @see https://nuxt.com/docs/api/nuxt-config#alias
-      return {
-        '~~': layer.config.rootDir,
-        '@@': layer.config.rootDir,
-        '~': layer.config.srcDir,
-        '@': layer.config.srcDir,
-        // Merge any additional aliases defined by the layer.
-        // Must be last so that the layer may override the "default" aliases.
-        ...(layer.config.alias || {}),
-      }
-    })
-
     // Resolver for the root directory.
     const srcResolver = createResolver(nuxt.options.srcDir)
     const rootResolver = createResolver(nuxt.options.rootDir)
@@ -240,7 +226,7 @@ export class ModuleHelper {
   public addTemplate(
     path: string,
     build?: (() => string) | null,
-    buildTypes?: (() => string) | null,
+    buildTypes?: (() => string | (() => string)) | null,
   ) {
     if (build) {
       const content = build().trim()
@@ -258,13 +244,14 @@ export class ModuleHelper {
       if (path.startsWith('/')) {
         throw new Error('buildTypes is not available for absolute paths.')
       }
-      const content = buildTypes().trim()
+      const result = buildTypes()
+      const getContents = typeof result === 'string' ? () => result : result
       const filename = 'vuepal-build/' + path + '.d.ts'
       addTypeTemplate(
         {
           filename: filename as `${string}.d.ts`,
           write: true,
-          getContents: () => content,
+          getContents,
         },
         {
           nuxt: true,

src/build/classes/ModuleHelper.ts

@@ -0,0 +1,53 @@
+import type { FragmentDefinitionNode, GraphQLInterfaceType } from 'graphql'
+import type { ModuleContext } from 'nuxt-graphql-middleware/utils'
+import { pascalCase } from 'change-case'
+
+export class RouteQueryBuilder {
+  private entityFragments = new Set<string>()
+  private typesImplementingEntity: Set<string>
+
+  constructor(graphql: ModuleContext) {
+    const entityInterface = graphql.schemaGetType(
+      'Entity',
+    ) as GraphQLInterfaceType
+    const result = graphql.getSchema().getImplementations(entityInterface)
+
+    this.typesImplementingEntity = new Set(
+      [...result.interfaces, ...result.objects].map((v) => v.name),
+    )
+  }
+
+  public handleSchema() {}
+
+  public handleFragments(fragments: FragmentDefinitionNode[]) {
+    this.entityFragments.clear()
+    for (const fragment of fragments) {
+      const typeName = fragment.typeCondition.name.value
+      if (this.typesImplementingEntity.has(typeName)) {
+        this.entityFragments.add(fragment.name.value)
+      }
+    }
+  }
+
+  public buildGraphqlTypesTemplate() {
+    const fragments = [...this.entityFragments.values()].map((fragmentName) => {
+      const typeName = pascalCase(fragmentName + 'Fragment')
+      const line = `"${fragmentName}": ${typeName}`
+      return { typeName, line }
+    })
+
+    const imports = fragments.map((v) => v.typeName).join(',\n  ')
+    const types = fragments.map((v) => v.line).join(',\n    ')
+    return `
+import type {
+  ${imports}
+} from '#graphql-operations'
+
+declare module '#vuepal-build/graphql' {
+  export type EntityFragment = {
+    ${types}
+  }
+}
+`.trim()
+  }
+}

src/build/features/drupalRoute/RouteQueryBuilder.ts

@@ -1,5 +1,7 @@
 import { defineVuepalFeature } from '../defineFeature'
 import { pascalCase, camelCase } from 'change-case'
+import { RouteQueryBuilder } from './RouteQueryBuilder'
+import type { EntityFragment } from '#vuepal-build/graphql'
 
 type DrupalRouteDefinition = {
   /**
@@ -8,7 +10,7 @@ type DrupalRouteDefinition = {
    * The fragments must exist in the project and they must target a type
    * that implements "Entity".
    */
-  fragments: string[]
+  fragments: Array<keyof EntityFragment>
 }
 
 export default defineVuepalFeature<{
@@ -100,7 +102,10 @@ fragment useDrupalRoute on Query {
 `,
     )
 
-    const routeQueries = Object.entries(options?.routeQueries || {})
+    const routeQueries = Object.entries(options?.routeQueries || {}) as [
+      string,
+      DrupalRouteDefinition,
+    ][]
 
     if (helper.isModuleBuild) {
       routeQueries.push([
@@ -170,6 +175,28 @@ declare module '#vuepal-build/route-queries' {
       },
     )
 
+    const routeQueryBuilder = new RouteQueryBuilder(helper.graphql)
+
+    const state = {
+      template: '',
+    }
+
+    helper.addTemplate(
+      'graphql',
+      () => {
+        return 'export {}'
+      },
+      () => {
+        return () => state.template
+      },
+    )
+
+    helper.nuxt.hook('nuxt-graphql-middleware:build', (ctx) => {
+      const fragments = ctx.output.getFragments().map((v) => v.node)
+      routeQueryBuilder.handleFragments(fragments)
+      state.template = routeQueryBuilder.buildGraphqlTypesTemplate()
+    })
+
     // Generate GraphQL queries.
     routeQueries.forEach(([name, definition]) => {
       const queryName = camelCase('route_' + name)