@attributech/nuxt-attribute-radio

nuxt-attribute-radio

Shared Nuxt 4 layer providing the generic GraphQL + caching plumbing used by Attribute radio sites (e.g. lora.ch, gds.fm). It wires up nuxt-graphql-middleware and nuxt-multi-cache so a consuming project only has to supply its own GraphQL queries, schema and site config.

What the layer provides

• Registers nuxt-graphql-middleware and nuxt-multi-cache.
• Sensible graphqlMiddleware defaults (autoImportPatterns: queries/**) and a full multiCache config (data / component / route / CDN via Surrogate-Control
  • cache-tags).
• server/graphqlMiddleware.serverOptions.ts — wraps every GraphQL request in nuxt-multi-cache's data cache and extracts Drupal cache-tags from the response, exposing them as __cacheTags and forwarding them to the CDN as Surrogate-Key.
• server/plugins/setCacheHeaders.ts + server/middleware/setCdnCacheHeaders.ts — default CDN cache policy and cache-tags → surrogate-key mapping.
• app/plugins/graphqlConfig.ts — client-side cache-tag propagation.
• Auto-imported composables: usePaginatedFilteredQuery, useStripHTML, useSanitizeHtml, useRedirect, useHandleRedirect.
• Generic app.config defaults (defaultPageSize*, filterDebounceDuration).

What stays in the consuming project

• GraphQL operations (queries/**/*.{gql,graphql}) and the committed schema.graphql. These differ per site, so #graphql-operations types are generated per project.
• Site app.config (navigation, languages, colors, …) — override the layer defaults and add your own keys.
• Domain composables/components (image URL helpers, content-type components, …).

Usage

Install and extend:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['../nuxt-attribute-radio'], // local path, git or npm ref

  graphqlMiddleware: {
    // Point at your site's Drupal GraphQL endpoint.
    graphqlEndpoint: `${apiUrl}`,
  },
})

Set the endpoint via graphqlMiddleware.graphqlEndpoint (recommended) or the NUXT_GRAPHQL_ENDPOINT environment variable. Introspection is disabled on the Drupal servers, so commit a generated schema.graphql rather than relying on downloadSchema.

serverOptions discovery

nuxt-graphql-middleware searches every layer's serverDir for graphqlMiddleware.serverOptions.ts, so the layer's version is picked up automatically. If a consuming project needs to customise it, add its own server/graphqlMiddleware.serverOptions.ts (project files win over the layer).

Development

The .playground directory smoke-tests the plumbing against a public, introspection-capable GraphQL API (no Drupal required):

pnpm install
pnpm dev        # boots .playground, downloads schema, generates types, runs a query