@iqual/nuxt-icms 1.6.0-rc.4 → 1.6.1

package/components/Drupal/Webform/index.vue

@@ -8,10 +8,10 @@
       @error="console.log"
       noValidate
     >
-      
-      <DesignSystemAtomsButton 
-        v-if="debug" 
-        @click="console.log(schema.safeParse(state))""
+
+      <DesignSystemAtomsButton
+        v-if="debug"
+        @click="console.log(schema.safeParse(state))"
         label="Debug Schema"
       />
 
@@ -24,7 +24,7 @@
           v-model="token"
           v-if="formElement?.metadata?.key === 'actions'"
         /> -->
-        
+
         <component
           v-if="formElement?.metadata?.type"
           :is="getComponent(formElement?.metadata?.type)"
@@ -34,8 +34,8 @@
           :debug="debug"
         />
       </div>
-      <DesignSystemAtomsButton 
-        v-if="debug" 
+      <DesignSystemAtomsButton
+        v-if="debug"
         @click="console.log(schema.safeParse(state))"
         label="Debug Schema"
         :buttonStyle="'focus'"

package/config/__tests__/multiCache.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { createEvent, getResponseHeaders } from 'h3'
+import { IncomingMessage, ServerResponse } from 'node-mock-http'
+import { NuxtMultiCacheCDNHelper } from 'nuxt-multi-cache/dist/runtime/helpers/CDNHelper.js'
+import multiCache from '../multiCache'
+
+type CDNHelper = InstanceType<typeof NuxtMultiCacheCDNHelper>
+
+/**
+ * Guards the CDN caching contract between the Nuxt SSR responses and
+ * Varnish (ICMS-86, regressed in ICMS-329, fixed in ICMS-689).
+ *
+ * Varnish (open-source) only understands Cache-Control — not the RFC 9213
+ * CDN-Cache-Control header. The VCL derives the TTL from s-maxage, detects
+ * uncacheable responses via `no-cache|no-store|private`, and maps Cache-Tag
+ * to xkey for tag-based purging. If these header names change, SSR pages
+ * silently degrade to Varnish's 120s default TTL.
+ */
+describe('multiCache CDN configuration', () => {
+  it('emits caching directives in the Cache-Control header', () => {
+    expect(multiCache.cdn).toMatchObject({
+      enabled: true,
+      cacheControlHeader: 'Cache-Control',
+      cacheTagHeader: 'Cache-Tag',
+    })
+  })
+})
+
+describe('CDN helper with the configured header names', () => {
+  function applyToFreshEvent(configure: (helper: CDNHelper) => void) {
+    const event = createEvent(new IncomingMessage(), new ServerResponse())
+    const helper = new NuxtMultiCacheCDNHelper(
+      Math.floor(Date.now() / 1000),
+      multiCache.cdn!.cacheControlHeader,
+      multiCache.cdn!.cacheTagHeader,
+    )
+    configure(helper)
+    helper.applyToEvent(event)
+    return getResponseHeaders(event)
+  }
+
+  it('writes s-maxage and cache tags for a cacheable response', () => {
+    const headers = applyToFreshEvent((helper) => {
+      helper
+        .public()
+        .setNumeric('sharedMaxAge', 31536000)
+        .addTags(['nuxt', 'N:12'])
+    })
+
+    // The VCL derives the TTL from s-maxage; directive order is irrelevant.
+    expect(headers['cache-control']).toMatch(/\bs-maxage=31536000\b/)
+    expect(headers['cache-control']).toMatch(/\bpublic\b/)
+    expect(headers['cache-control']).not.toMatch(/private|no-cache|no-store/)
+    expect(headers['cache-tag']).toBe('nuxt N:12')
+  })
+
+  it('marks uncacheable responses as private', () => {
+    const headers = applyToFreshEvent((helper) => {
+      helper.private()
+    })
+
+    // Varnish's uncacheable-response detection matches
+    // `no-cache|no-store|private` on Cache-Control.
+    expect(headers['cache-control']).toMatch(/private/)
+    expect(headers['cache-tag']).toBeUndefined()
+  })
+})

package/config/__tests__/stubs/nuxt-multi-cache-config.ts

@@ -0,0 +1,6 @@
+// Stub for the virtual module '#nuxt-multi-cache/config' that is normally
+// generated at build time by nuxt-multi-cache. Tests pass header names
+// explicitly to the CDN helper, so these defaults are never used.
+export const cdnCacheControlHeader = ''
+export const cdnCacheTagHeader = ''
+export const cdnEnabled = true

package/config/blokkli.ts

@@ -72,6 +72,7 @@ export default defineNuxtConfigProperty<'blokkli'>((ctx) => {
     },
     pattern: [
       './components/Paragraph/**/*.{js,ts,vue}',
+      './components/Blokkli/**/*.{js,ts,vue}',
       join(currentLayerDir, './components/Blokkli/**/*.{js,ts,vue}'),
     ],
     globalOptions: {
@@ -385,4 +386,4 @@ export default defineNuxtConfigProperty<'blokkli'>((ctx) => {
     // current page language.
     forceDefaultLanguage: false,
   }
-})
+})

package/config/multiCache.ts

@@ -19,7 +19,7 @@ export default defineNuxtConfigProperty<'multiCache'>((ctx) => {
     },
     cdn: {
       enabled: true,
-      cacheControlHeader: 'CDN-Cache-Control',
+      cacheControlHeader: 'Cache-Control',
       cacheTagHeader: 'Cache-Tag',
     },
     debug: ctx.DEV,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.6.0-rc.4",
+  "version": "1.6.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,
@@ -32,7 +32,7 @@
     "nitropack": "~2.13.4",
     "nuxt": "~4.4.8",
     "nuxt-easy-texts": "~2.1.2",
-    "nuxt-graphql-middleware": "~5.4.0",
+    "nuxt-graphql-middleware": "5.4.0",
     "nuxt-language-negotiation": "~2.0.2",
     "nuxt-maplibre": "~1.2.2",
     "nuxt-multi-cache": "~4.0.3",

package/patches/@blokkli+editor+2.0.0-alpha.13.patch

@@ -0,0 +1,164 @@
+diff --git a/node_modules/@blokkli/editor/dist/module.mjs b/node_modules/@blokkli/editor/dist/module.mjs
+index 0ff0d3b..5329e9f 100644
+--- a/node_modules/@blokkli/editor/dist/module.mjs
++++ b/node_modules/@blokkli/editor/dist/module.mjs
+@@ -271,16 +271,31 @@ class CollectedBlockFile extends CollectedFile {
+ }
+ class BlockCollector extends Collector {
+   patterns;
++  positivePatterns;
++  negativePatterns;
++  // Files that define the same block bundle (or fragment name) as a file in a
++  // higher-priority Nuxt layer. They are kept here instead of in `files` so
++  // they can be re-activated when the overriding file is removed.
++  shadowed = /* @__PURE__ */ new Map();
+   constructor(helper) {
+     super(helper);
+-    this.patterns = (helper.options.pattern || []).map((pattern) => {
++    this.patterns = (helper.options.pattern || []).map((raw) => {
++      // Support negated glob patterns (e.g. "!**/components/Blokkli/Text/**")
++      // to exclude components from collection.
++      const isNegated = raw.startsWith("!");
++      const pattern = isNegated ? raw.slice(1) : raw;
++      let resolved = pattern;
+       if (pattern.startsWith("/")) {
+-        return pattern;
++        resolved = pattern;
+       } else if (pattern.startsWith(".")) {
+-        return helper.resolvers.src.resolve(pattern);
++        resolved = helper.resolvers.src.resolve(pattern);
++      } else {
++        resolved = resolveAlias(pattern);
+       }
+-      return resolveAlias(pattern);
++      return isNegated ? "!" + resolved : resolved;
+     });
++    this.positivePatterns = this.patterns.filter((v) => !v.startsWith("!"));
++    this.negativePatterns = this.patterns.filter((v) => v.startsWith("!")).map((v) => v.slice(1));
+   }
+   async init() {
+     const files = await resolveFiles(
+@@ -295,6 +310,90 @@ class BlockCollector extends Collector {
+       }
+     }
+     await Promise.all(promises);
++    this.resolveLayerOverrides();
++  }
++  /**
++   * Determine the Nuxt layer priority of a file.
++   *
++   * Lower value = higher priority. The app/project layer is index 0, extended
++   * layers follow in the order they are defined. Files that can't be matched
++   * to a layer get the lowest priority.
++   */
++  getLayerPriority(filePath) {
++    const layers = this.helper.nuxt.options._layers || [];
++    let priority = layers.length;
++    let longestMatch = -1;
++    for (let i = 0; i < layers.length; i++) {
++      const config = layers[i].config || {};
++      const dirs = [config.srcDir, config.rootDir, layers[i].cwd];
++      for (const dir of dirs) {
++        if (!dir) {
++          continue;
++        }
++        const prefix = dir.endsWith("/") ? dir : dir + "/";
++        if (filePath.startsWith(prefix) && dir.length > longestMatch) {
++          priority = i;
++          longestMatch = dir.length;
++        }
++      }
++    }
++    return priority;
++  }
++  /**
++   * Resolve collisions where multiple collected files define the same block
++   * bundle (or fragment name): the file from the highest-priority Nuxt layer
++   * wins, the others are shadowed. Files in the same layer are left untouched
++   * so genuine duplicates still surface as errors.
++   *
++   * @returns Whether the set of active files has changed.
++   */
++  resolveLayerOverrides() {
++    const previouslyShadowed = this.shadowed;
++    this.shadowed = /* @__PURE__ */ new Map();
++    for (const [filePath, file] of previouslyShadowed) {
++      if (!this.files.has(filePath)) {
++        this.files.set(filePath, file);
++      }
++    }
++    const byIdentifier = /* @__PURE__ */ new Map();
++    for (const file of this.files.values()) {
++      if (!file.definition || !file.identifier) {
++        continue;
++      }
++      const group = byIdentifier.get(file.identifier);
++      if (group) {
++        group.push(file);
++      } else {
++        byIdentifier.set(file.identifier, [file]);
++      }
++    }
++    for (const group of byIdentifier.values()) {
++      if (group.length < 2) {
++        continue;
++      }
++      const priorities = group.map((file) => this.getLayerPriority(file.filePath));
++      const winningPriority = Math.min(...priorities);
++      group.forEach((file, index) => {
++        if (priorities[index] > winningPriority) {
++          this.shadowed.set(file.filePath, file);
++          this.files.delete(file.filePath);
++        }
++      });
++    }
++    if (previouslyShadowed.size !== this.shadowed.size) {
++      return true;
++    }
++    for (const filePath of this.shadowed.keys()) {
++      if (!previouslyShadowed.has(filePath)) {
++        return true;
++      }
++    }
++    return false;
++  }
++  async handleWatchEvent(event, filePath) {
++    const result = await super.handleWatchEvent(event, filePath);
++    const overridesChanged = this.resolveLayerOverrides();
++    return { hasChanged: result.hasChanged || overridesChanged };
+   }
+   runHooks() {
+     return this.helper.nuxt.hooks.callHook("blokkli:alter-blocks", {
+@@ -348,7 +447,10 @@ class BlockCollector extends Collector {
+     if (!filePath.endsWith(".vue")) {
+       return false;
+     }
+-    if (!micromatch.isMatch(filePath, this.patterns)) {
++    if (!micromatch.isMatch(filePath, this.positivePatterns)) {
++      return false;
++    }
++    if (this.negativePatterns.length && micromatch.isMatch(filePath, this.negativePatterns)) {
+       return false;
+     }
+     if (isEditComponent(filePath)) {
+@@ -470,7 +572,19 @@ class IconCollector extends Collector {
+       this.helper.paths.srcDir,
+       "**/icon-blokkli-*.svg"
+     );
+-    const allFiles = [...filesModule, ...filesApp];
++    // Also scan all Nuxt layer directories for icon SVGs.
++    const layerFiles = [];
++    const layers = this.helper.nuxt.options._layers || [];
++    for (const layer of layers) {
++      if (layer.config && layer.config.srcDir && layer.config.srcDir !== this.helper.paths.srcDir) {
++        const files = await resolveFiles(
++          layer.config.srcDir,
++          "**/icon-blokkli-*.svg"
++        );
++        layerFiles.push(...files);
++      }
++    }
++    const allFiles = [...filesModule, ...filesApp, ...layerFiles];
+     await Promise.all(allFiles.map((filePath) => this.addFile(filePath)));
+   }
+   runHooks() {

package/patches/nuxt-graphql-middleware+5.4.0.patch

@@ -0,0 +1,232 @@
+diff --git a/node_modules/nuxt-graphql-middleware/dist/module.mjs b/node_modules/nuxt-graphql-middleware/dist/module.mjs
+index 8396abf..62f5068 100644
+--- a/node_modules/nuxt-graphql-middleware/dist/module.mjs
++++ b/node_modules/nuxt-graphql-middleware/dist/module.mjs
+@@ -215,12 +215,115 @@ class Collector {
+    */
+   fragments = [];
+   isInitialised = false;
++  /**
++   * The definition keys (kind:name) currently synced to the generator, per
++   * file path.
++   */
++  syncedDefinitionKeys = /* @__PURE__ */ new Map();
++  /**
++   * File paths whose contents have changed since the last generator sync.
++   */
++  dirtyFiles = /* @__PURE__ */ new Set();
+   async reset() {
+     this.files.clear();
++    this.syncedDefinitionKeys.clear();
++    this.dirtyFiles.clear();
+     this.generator.reset();
+     this.operationTimestamps.clear();
+     this.rpcItems.clear();
+   }
++  /**
++   * Determine the Nuxt layer priority of a file.
++   *
++   * Lower value = higher priority. The app/project layer is index 0, extended
++   * layers follow in the order they are defined. Documents provided via hooks
++   * get the highest priority. Files that can't be matched to a layer get the
++   * lowest priority.
++   */
++  getLayerPriority(filePath) {
++    if (filePath.startsWith("hook:")) {
++      return -1;
++    }
++    const layers = this.helper.nuxt.options._layers || [];
++    let priority = layers.length;
++    let longestMatch = -1;
++    for (let i = 0; i < layers.length; i++) {
++      const config = layers[i].config || {};
++      const dirs = [config.srcDir, config.rootDir, layers[i].cwd];
++      for (const dir of dirs) {
++        if (!dir) {
++          continue;
++        }
++        const prefix = dir.endsWith("/") ? dir : dir + "/";
++        if (filePath.startsWith(prefix) && dir.length > longestMatch) {
++          priority = i;
++          longestMatch = dir.length;
++        }
++      }
++    }
++    return priority;
++  }
++  /**
++   * Sync all collected files to the generator, resolving cross-layer
++   * definition collisions: when multiple files define a fragment or operation
++   * with the same name, the definition from the highest-priority Nuxt layer
++   * (the app/project first, then extended layers in order) wins and the
++   * shadowed definitions are excluded from the documents passed to the
++   * generator. This makes it possible to override a fragment or operation
++   * from a layer in the app or in a higher-priority layer. Definitions with
++   * the same layer priority are left untouched (existing behaviour).
++   */
++  syncGenerator() {
++    const owners = /* @__PURE__ */ new Map();
++    for (const [filePath, file] of this.files) {
++      const priority = this.getLayerPriority(filePath);
++      for (const def of file.parsed.definitions) {
++        if (def.kind !== "FragmentDefinition" && def.kind !== "OperationDefinition") {
++          continue;
++        }
++        const name = def.name?.value;
++        if (!name) {
++          continue;
++        }
++        const key = def.kind + ":" + name;
++        const owner = owners.get(key);
++        if (!owner || priority < owner.priority) {
++          owners.set(key, { priority });
++        }
++      }
++    }
++    for (const [filePath, file] of this.files) {
++      const priority = this.getLayerPriority(filePath);
++      const definitions = file.parsed.definitions.filter((def) => {
++        if (def.kind !== "FragmentDefinition" && def.kind !== "OperationDefinition") {
++          return true;
++        }
++        const name = def.name?.value;
++        if (!name) {
++          return true;
++        }
++        const owner = owners.get(def.kind + ":" + name);
++        return !owner || owner.priority >= priority;
++      });
++      const keys = definitions.map((def) => def.kind + ":" + (def.name?.value || "")).join("|");
++      const previousKeys = this.syncedDefinitionKeys.get(filePath);
++      const documentNode = definitions.length === file.parsed.definitions.length ? file.parsed : { ...file.parsed, definitions };
++      if (previousKeys === void 0) {
++        this.generator.add({ filePath, documentNode });
++        this.syncedDefinitionKeys.set(filePath, keys);
++      } else if (previousKeys !== keys || this.dirtyFiles.has(filePath)) {
++        this.generator.update({ filePath, documentNode });
++        this.syncedDefinitionKeys.set(filePath, keys);
++      }
++    }
++    for (const filePath of [...this.syncedDefinitionKeys.keys()]) {
++      if (!this.files.has(filePath)) {
++        this.generator.remove(filePath);
++        this.syncedDefinitionKeys.delete(filePath);
++      }
++    }
++    this.dirtyFiles.clear();
++  }
+   async updateSchema(schema) {
+     this.schema = schema;
+     this.generator.updateSchema(schema);
+@@ -436,10 +539,10 @@ class Collector {
+     const exists = this.hookDocuments.has(fullIdentifier);
+     this.hookDocuments.set(fullIdentifier, source);
+     if (exists && this.isInitialised) {
+-      this.generator.update({
+-        filePath: fullIdentifier,
+-        document: source
+-      });
++      const file = new CollectedFile(fullIdentifier, source, false);
++      this.files.set(fullIdentifier, file);
++      this.dirtyFiles.add(fullIdentifier);
++      this.syncGenerator();
+       await this.buildState();
+     }
+   }
+@@ -460,23 +563,16 @@ class Collector {
+         const filePath = this.helper.paths.nuxtConfig;
+         const file = new CollectedFile(filePath, nuxtConfigDocuments, false);
+         this.files.set(filePath, file);
+-        this.generator.add({
+-          filePath,
+-          documentNode: file.parsed
+-        });
+       }
+       const hookDocuments = [...this.hookDocuments.entries()];
+       hookDocuments.forEach(([identifier, source]) => {
+         const file = new CollectedFile(identifier, source, false);
+         this.files.set(identifier, file);
+-        this.generator.add({
+-          filePath: identifier,
+-          documentNode: file.parsed
+-        });
+       });
+       for (const filePath of this.hookFiles) {
+         await this.addFile(filePath);
+       }
++      this.syncGenerator();
+       await this.buildState();
+       if (!this.helper.isPrepare) {
+         logger.success("All GraphQL documents are valid.");
+@@ -495,10 +591,6 @@ class Collector {
+       return null;
+     }
+     this.files.set(filePath, file);
+-    this.generator.add({
+-      filePath,
+-      documentNode: file.parsed
+-    });
+     return file;
+   }
+   matchesPatternOrExists(filePath) {
+@@ -509,7 +601,11 @@ class Collector {
+       return false;
+     }
+     const result = await this.addFile(filePath);
+-    return !!result;
++    if (!result) {
++      return false;
++    }
++    this.syncGenerator();
++    return true;
+   }
+   async handleChange(filePath) {
+     if (!this.matchesPatternOrExists(filePath)) {
+@@ -524,10 +620,8 @@ class Collector {
+       if (!needsUpdate) {
+         return false;
+       }
+-      this.generator.update({
+-        filePath,
+-        documentNode: file.parsed
+-      });
++      this.dirtyFiles.add(filePath);
++      this.syncGenerator();
+     } catch {
+       return this.handleUnlink(filePath);
+     }
+@@ -539,7 +633,7 @@ class Collector {
+       return false;
+     }
+     this.files.delete(filePath);
+-    this.generator.remove(filePath);
++    this.syncGenerator();
+     return true;
+   }
+   handleUnlinkDir(folderPath) {
+@@ -1128,7 +1222,24 @@ class ModuleHelper {
+     );
+   }
+   matchesImportPattern(filePath) {
+-    return micromatch.isMatch(filePath, this.options.autoImportPatterns) || this.options.autoImportPatterns.includes(filePath);
++    // micromatch.isMatch with an array returns true if *any* pattern matches.
++    // A negated pattern (e.g. "!node_modules") matches every path that does
++    // not equal it, which would make every file match. Split the patterns and
++    // apply proper include/exclude semantics instead.
++    const positive = this.options.autoImportPatterns.filter(
++      (v) => !v.startsWith("!")
++    );
++    const negative = this.options.autoImportPatterns.filter((v) => v.startsWith("!")).map((v) => v.slice(1));
++    if (this.options.autoImportPatterns.includes(filePath)) {
++      return true;
++    }
++    if (!micromatch.isMatch(filePath, positive)) {
++      return false;
++    }
++    if (negative.length && micromatch.isMatch(filePath, negative)) {
++      return false;
++    }
++    return true;
+   }
+   addAlias(name, path) {
+     this.nuxt.options.alias[name] = path;

package/scripts/update-icms.ts

@@ -3,7 +3,9 @@ import { readFile } from 'node:fs/promises'
 
 /**
  * Updates all installed @iqual packages to the given NPM dist-tag,
- * e.g. `rc` for testing ICMS release candidates.
+ * e.g. `rc` for testing ICMS release candidates. When `latest` points to a
+ * newer version than the given dist-tag (e.g. the stable release following
+ * the release candidates), the newer version wins.
  *
  * Usage (from the frontend root): bun run ./node_modules/@iqual/nuxt-icms/scripts/update-icms.ts <dist-tag>
  */
@@ -20,10 +22,30 @@ if (!distTag) {
 
 const pkg = JSON.parse(await readFile('./package.json', 'utf-8'))
 
+const resolve = async (name: string): Promise<string> => {
+  const response = await fetch(`https://registry.npmjs.org/${name}`)
+  if (!response.ok) {
+    fail(`Failed to fetch dist-tags for ${name} (${response.status})`)
+  }
+  const tags: Record<string, string> = (await response.json())['dist-tags']
+  const tagged = tags[distTag]
+  if (!tagged) {
+    fail(`No \`${distTag}\` dist-tag found for ${name}`)
+  }
+  return tags.latest && Bun.semver.order(tags.latest, tagged) > 0
+    ? tags.latest
+    : tagged
+}
+
 const pick = (dependencies?: Record<string, string>) =>
-  Object.entries(dependencies ?? {})
-    .filter(([name, constraint]) => name.startsWith('@iqual/') && !constraint.startsWith('workspace:'))
-    .map(([name]) => `${name}@${distTag}`)
+  Promise.all(
+    Object.entries(dependencies ?? {})
+      .filter(
+        ([name, constraint]) =>
+          name.startsWith('@iqual/') && !constraint.startsWith('workspace:'),
+      )
+      .map(async ([name]) => `${name}@^${await resolve(name)}`),
+  )
 
 const add = (packages: string[], flags: string[] = []) => {
   if (packages.length === 0) return
@@ -34,5 +56,5 @@ const add = (packages: string[], flags: string[] = []) => {
   }
 }
 
-add(pick(pkg.dependencies))
-add(pick(pkg.devDependencies), ['--dev'])
+add(await pick(pkg.dependencies))
+add(await pick(pkg.devDependencies), ['--dev'])

package/server/__tests__/graphqlMiddleware.serverOptions.spec.ts

@@ -0,0 +1,170 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import {
+  createEvent,
+  getResponseHeaders,
+  appendResponseHeader,
+  setResponseStatus,
+} from 'h3'
+import type { H3Event } from 'h3'
+import { IncomingMessage, ServerResponse } from 'node-mock-http'
+import { NuxtMultiCacheCDNHelper } from 'nuxt-multi-cache/dist/runtime/helpers/CDNHelper.js'
+import multiCache from '../../config/multiCache'
+
+vi.mock('#nuxt-language-negotiation/config', () => ({
+  defaultLangcode: 'de',
+  langcodes: ['de', 'fr', 'it', 'en'],
+}))
+
+vi.mock('#shared/request', () => ({
+  buildProxyRequestHeaders: () => ({}),
+}))
+
+// Nitro auto-imports in the module under test, provided as globals: the h3
+// helpers are the real ones, useCDNHeaders mirrors nuxt-multi-cache's server
+// util using the real CDN helper and the real multiCache configuration — so
+// these tests cover the full chain from config to emitted header values.
+vi.stubGlobal('appendResponseHeader', appendResponseHeader)
+vi.stubGlobal('setResponseStatus', setResponseStatus)
+vi.stubGlobal(
+  'useCDNHeaders',
+  (
+    cb: (helper: InstanceType<typeof NuxtMultiCacheCDNHelper>) => void,
+    event: H3Event,
+  ) => {
+    const helper = new NuxtMultiCacheCDNHelper(
+      Math.floor(Date.now() / 1000),
+      multiCache.cdn!.cacheControlHeader,
+      multiCache.cdn!.cacheTagHeader,
+    )
+    cb(helper)
+    helper.applyToEvent(event)
+  },
+)
+
+const serverOptions = (await import('../graphqlMiddleware.serverOptions'))
+  .default
+
+function freshEvent() {
+  return createEvent(new IncomingMessage(), new ServerResponse())
+}
+
+function drupalResponse({
+  expires = '-1',
+  purgeCacheTags = 'graphql_response node:12 http_response',
+  data = { route: { label: 'Test' } } as Record<string, unknown>,
+}: {
+  expires?: string | null
+  purgeCacheTags?: string
+  data?: Record<string, unknown>
+} = {}) {
+  const headers = new Headers({
+    'purge-cache-tags': purgeCacheTags,
+    'x-nuxt-cache-tags': 'N:12 h5ej',
+  })
+  if (expires !== null) {
+    headers.set('x-nuxt-expires', expires)
+  }
+  return {
+    headers,
+    _data: { data, errors: [] },
+  } as never
+}
+
+const clientContext = { client: { env: 'client' } } as never
+
+/**
+ * Guards the CDN headers on the /api/graphql/* server routes, used by
+ * SPA-style client navigation (ICMS-86; the pass-through was lost in the
+ * nuxt-graphql-middleware v5 upgrade and restored with ICMS-689). Without
+ * them, Varnish caches these responses for its 120s default TTL and cannot
+ * purge them by cache tag.
+ */
+describe('onServerResponse', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('sets Cache-Control and the raw Drupal cache tags for cacheable queries', () => {
+    const event = freshEvent()
+
+    serverOptions.onServerResponse!(
+      event,
+      drupalResponse(),
+      'query',
+      'route',
+      clientContext,
+    )
+
+    const headers = getResponseHeaders(event)
+    expect(headers['cache-control']).toMatch(/\bs-maxage=31536000\b/)
+    expect(headers['cache-control']).toMatch(/\bpublic\b/)
+    // The raw purge tags purge Varnish; the encoded nuxt tags must not
+    // appear — they only concern the internal data cache.
+    expect(headers['cache-tag']).toBe(
+      'graphql_response node:12 http_response nuxt:api:graphql',
+    )
+  })
+
+  it('marks uncacheable responses (x-nuxt-expires: 0) as private', () => {
+    const event = freshEvent()
+
+    serverOptions.onServerResponse!(
+      event,
+      drupalResponse({ expires: '0' }),
+      'query',
+      'route',
+      clientContext,
+    )
+
+    const headers = getResponseHeaders(event)
+    expect(headers['cache-control']).toMatch(/\bprivate\b/)
+    expect(headers['cache-control']).not.toMatch(/s-maxage/)
+  })
+
+  it('marks mutations as private', () => {
+    const event = freshEvent()
+
+    serverOptions.onServerResponse!(
+      event,
+      drupalResponse(),
+      'mutation',
+      'submitForm',
+      clientContext,
+    )
+
+    expect(getResponseHeaders(event)['cache-control']).toMatch(/\bprivate\b/)
+  })
+
+  it('marks responses containing Drupal messages as private', () => {
+    const event = freshEvent()
+
+    serverOptions.onServerResponse!(
+      event,
+      drupalResponse({
+        data: { messengerMessages: [{ type: 'error', safe: 'Nope' }] },
+      }),
+      'query',
+      'route',
+      clientContext,
+    )
+
+    expect(getResponseHeaders(event)['cache-control']).toMatch(/\bprivate\b/)
+  })
+})
+
+describe('onServerError', () => {
+  it('marks error responses as private with status 500', () => {
+    vi.spyOn(console, 'log').mockImplementation(() => {})
+    const event = freshEvent()
+
+    serverOptions.onServerError!(
+      event,
+      new Error('backend down') as never,
+      'query',
+      'route',
+    )
+
+    expect(event.node.res.statusCode).toBe(500)
+    expect(getResponseHeaders(event)['cache-control']).toMatch(/\bprivate\b/)
+  })
+})

package/server/graphqlMiddleware.serverOptions.ts

@@ -1,7 +1,7 @@
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
 import { extractCacheability } from '../server/utils/cacheability'
 import { defaultLangcode, langcodes } from '#nuxt-language-negotiation/config'
-import type { GraphqlCacheability } from '../server/helpers'
+import { MAX_AGE, type GraphqlCacheability } from '../server/helpers'
 import { buildProxyRequestHeaders } from '#shared/request'
 
 export default defineGraphqlServerOptions<{
@@ -14,7 +14,7 @@ export default defineGraphqlServerOptions<{
     const clientContextLanguage = context?.client?.language
     if (
       clientContextLanguage &&
-      langcodes.includes(clientContextLanguage as any)
+      langcodes.includes(clientContextLanguage as (typeof langcodes)[number])
     ) {
       return `${config.backendUrl}/${clientContextLanguage}/graphql`
     }
@@ -31,13 +31,7 @@ export default defineGraphqlServerOptions<{
       },
     }
   },
-  onServerResponse(
-    event,
-    graphqlResponse,
-    _operation,
-    _operationName,
-    context,
-  ) {
+  onServerResponse(event, graphqlResponse, operation, operationName, context) {
     // Pass the set-cookie header from the GraphQL response to the client.
     const setCookie = graphqlResponse.headers.getSetCookie()
 
@@ -58,6 +52,27 @@ export default defineGraphqlServerOptions<{
       cacheability.isCacheable = false
     }
 
+    // Set the CDN headers (Cache-Control, Cache-Tag) on this API route's
+    // response, so that Varnish caches client-side navigation requests with
+    // the correct TTL and purges them by cache tag (ICMS-86/ICMS-689 —
+    // originally introduced in PR #71, lost in the nuxt-graphql-middleware
+    // v5 upgrade). The raw Drupal tags (tagsCdn) are used here; the encoded
+    // tags (tagsNuxt) only concern the internal data cache.
+    useCDNHeaders((cdn) => {
+      if (operation === 'query' && operationName && cacheability.isCacheable) {
+        cdn
+          .public()
+          .setNumeric('sharedMaxAge', cacheability.sharedMaxAge)
+          .set('staleIfError', MAX_AGE.ONE_DAY)
+          .set('staleWhileRevalidate', MAX_AGE.TWO_HOURS)
+          .set('mustRevalidate', true)
+          .addTags(cacheability.tagsCdn)
+          .addTags(['nuxt:api:graphql'])
+      } else {
+        cdn.private()
+      }
+    }, event)
+
     const isServerRequest = context?.client?.env === 'server'
 
     // This is only provided when the request originates from SSR.
@@ -77,10 +92,11 @@ export default defineGraphqlServerOptions<{
   },
   onServerError(event, error) {
     setResponseStatus(event, 500)
+    useCDNHeaders((cdn) => cdn.private(), event)
     console.log('onServerError', error)
     return {
       data: null,
       errors: [],
     }
   },
-})
+})