Update all Drupal and NodeJS packages

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:20.11.1
+image: node:20.16.0
 
 variables:
   DEBIAN_FRONTEND: noninteractive

frontend/.nvmrc

@@ -1 +1 @@
-v20.11.0
+v20.16.0

frontend/app/graphqlMiddleware.serverOptions.ts

@@ -1,18 +1,26 @@
-/** @ts-expect-error Due to a bug in the `nuxt-graphql-middleware` package, we cannot import the type. */
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/dist/runtime/serverOptions'
 import type { H3Event } from 'h3'
 import baseServerOptions from '~/base/app/graphqlMiddleware.serverOptions'
 
 export default defineGraphqlServerOptions({
-  serverFetchOptions(event: H3Event, operation?: string, operationName?: string) {
+  serverFetchOptions(event, operation, operationName) {
+    if (!baseServerOptions.serverFetchOptions)
+      return {}
+
     return baseServerOptions.serverFetchOptions(event, operation, operationName)
   },
 
-  async doGraphqlRequest({ event, operation, operationName, operationDocument, variables }: { event: H3Event, operation: any, operationName: string, operationDocument: string, variables: Record<string, any> }) {
+  async doGraphqlRequest({ event, operation, operationName, operationDocument, variables }) {
+    if (!baseServerOptions.doGraphqlRequest)
+      return
+
     return await baseServerOptions.doGraphqlRequest({ event, operation, operationName, operationDocument, variables })
   },
 
-  async onServerResponse(event: H3Event, response: Response) {
+  async onServerResponse(event, response) {
+    if (!baseServerOptions.onServerResponse)
+      return
+
     return await baseServerOptions.onServerResponse(event, response)
   },
 })

frontend/base/app/graphqlMiddleware.serverOptions.ts

@@ -1,17 +1,9 @@
 import process from 'node:process'
 
-/** @ts-expect-error Due to a bug in the `nuxt-graphql-middleware` package, we cannot import the type. */
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/dist/runtime/serverOptions'
-import type { H3Event } from 'h3'
 import type { FetchError, FetchOptions, FetchResponse } from 'ofetch'
 
 import { timestamp } from '@vueuse/core'
-import serverOptions from '#graphql-middleware-server-options-build'
-
-enum GraphqlMiddlewareOperation {
-  Query = 'query',
-  Mutation = 'mutation',
-}
 
 interface CacheData {
   data: any
@@ -31,19 +23,22 @@ function getCacheKey(url: URL): string {
 
 export default defineGraphqlServerOptions({
   serverFetchOptions(
-    event: H3Event,
-    _operation?: string,
-    _operationName?: string,
+    event,
+    _operation,
+    _operationName,
   ) {
-    const { headers } = event
+    if (!event)
+      return { }
+
+    const headers = event.headers
 
     if (headers.has('Authorization')) {
       if (!headers.get('Authorization')?.startsWith('Basic ')) {
         return {
           headers: {
             Authorization: headers.get('Authorization') || '',
           },
-        }
+        } as FetchOptions
       }
     }
 
@@ -53,30 +48,26 @@ export default defineGraphqlServerOptions({
       headers: {
         token,
       },
-    }
+    } as FetchOptions
   },
 
   async doGraphqlRequest({
     event,
-    operation,
     operationName,
     operationDocument,
     variables,
-  }: {
-    event: H3Event
-    operation: GraphqlMiddlewareOperation
-    operationName: string
-    operationDocument: string
-    variables: Record<string, any>
   }) {
+    if (!this.serverFetchOptions)
+      return
+
     const url = new URL(`${process.env.NUXT_PUBLIC_BASE_URL}${event._path}`)
 
     if (await storage.hasItem(getCacheKey(url))) {
       const cachedData = await storage.getItem<CacheData>(getCacheKey(url))
       const now = timestamp()
 
       if (cachedData && now - cachedData.timestamp < 3600000)
-        return cachedData.data
+        return cachedData.data as unknown
 
       await storage.removeItem(getCacheKey(url))
     }
@@ -85,18 +76,9 @@ export default defineGraphqlServerOptions({
 
     const endpoint = await getEndpoint(
       runtimeConfig,
-      serverOptions,
-      event,
-      operation,
-      operationName,
     )
 
-    const fetchOptions = await getFetchOptions(
-      serverOptions,
-      event,
-      operation,
-      operationName,
-    )
+    const fetchOptions = await this.serverFetchOptions(event, operationName)
 
     return $fetch
       .raw(endpoint, {
@@ -108,124 +90,54 @@ export default defineGraphqlServerOptions({
         },
         ...fetchOptions,
       })
-      .then((response) => {
-        return onServerResponse(
-          serverOptions,
+      .then(async (response) => {
+        if (!this.onServerResponse)
+          return
+
+        return await this.onServerResponse(
           event,
-          response,
-          operation,
-          operationName,
-        )
+          response as any,
+        ) as any
       })
       .catch((error) => {
         return onServerError(
-          serverOptions,
-          event,
           error,
-          operation,
-          operationName,
         )
       })
   },
 
-  async onServerResponse(event: H3Event, response: Response) {
+  async onServerResponse(event, response) {
     if (Math.floor(response.status / 100) !== 2)
       event.respondWith(response)
 
     const data = {
-      // @ts-expect-error The `_data` property is not defined in the `Response` type.
-      data: response._data,
+      data: response._data || undefined,
       timestamp: timestamp(),
     }
 
     const url = new URL(`${process.env.NUXT_PUBLIC_BASE_URL}${event._path}`)
-
     await storage.setItem<CacheData>(getCacheKey(url), data)
 
-    return data.data
+    return response._data
   },
 })
 
 /**
  * Get the URL of the GraphQL endpoint.
  */
-function getEndpoint(
-  config: any,
-  serverOptions: any,
-  event: H3Event,
-  operation: GraphqlMiddlewareOperation,
-  operationName: string,
-): string | Promise<string> {
-  if (serverOptions.graphqlEndpoint) {
-    const result = serverOptions.graphqlEndpoint(
-      event,
-      operation,
-      operationName,
-    )
-
-    if (result)
-      return Promise.resolve(result)
-  }
+function getEndpoint(config: any): string | Promise<string> {
   if (config.graphqlEndpoint)
     return config.graphqlEndpoint
 
   throw new Error('Failed to determine endpoint for GraphQL server.')
 }
 
-/**
- * Get the options for the $fetch request to the GraphQL server.
- */
-function getFetchOptions(
-  serverOptions: any,
-  event: H3Event,
-  operation: GraphqlMiddlewareOperation,
-  operationName: string,
-): FetchOptions | Promise<FetchOptions> {
-  if (serverOptions.serverFetchOptions) {
-    return (
-      serverOptions.serverFetchOptions(event, operation, operationName) || {}
-    )
-  }
-
-  return {}
-}
-
-/**
- * Handle GraphQL server response.
- */
-function onServerResponse(
-  serverOptions: any,
-  event: H3Event,
-  response: FetchResponse<any>,
-  operation?: string,
-  operationName?: string,
-) {
-  if (serverOptions.onServerResponse) {
-    return serverOptions.onServerResponse(
-      event,
-      response,
-      operation,
-      operationName,
-    )
-  }
-
-  return response._data
-}
-
 /**
  * Handle GraphQL server errors.
  */
-function onServerError(
-  serverOptions: any,
-  event: H3Event,
-  error: FetchError,
-  operation?: string,
-  operationName?: string,
-) {
-  if (serverOptions.onServerError)
-    return serverOptions.onServerError(event, error, operation, operationName)
-
+function onServerError(error: FetchError) {
   const message = error && 'message' in error ? error.message : ''
+
   throw createError({
     statusCode: 500,
     statusMessage: `Couldn't execute GraphQL query: ${message}`,

frontend/base/nuxt.config.ts

@@ -3,6 +3,8 @@ import loadingTemplate from './loading/index'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+
   ssr: true,
 
   devtools: {

frontend/nuxt.config.ts

@@ -1,5 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+
   extends: [
     './themes/default',
     './base',

frontend/package.json

@@ -12,27 +12,27 @@
     "analyze": "nuxt analyze"
   },
   "dependencies": {
-    "vue": "^3.4.26",
-    "vue-router": "^4.3.2"
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.16.1",
-    "@iconify-json/mdi": "^1.1.66",
+    "@antfu/eslint-config": "^2.25.1",
+    "@iconify-json/mdi": "^1.1.68",
     "@nuxt/image": "^1.7.0",
-    "@nuxtjs/i18n": "^8.3.1",
+    "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/seo": "2.0.0-rc.9",
-    "@nuxtjs/tailwindcss": "^6.12.0",
-    "@vueuse/core": "^10.9.0",
-    "@vueuse/nuxt": "^10.9.0",
+    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@vueuse/core": "^10.11.1",
+    "@vueuse/nuxt": "^10.11.1",
     "eslint": "^8.57.0",
-    "nuxt": "^3.11.2",
-    "nuxt-graphql-middleware": "^4.0.0",
+    "nuxt": "^3.12.4",
+    "nuxt-graphql-middleware": "^4.1.1",
     "nuxt-icon": "1.0.0-beta.4",
     "nuxt-security": "^1.4.3",
     "nuxt-seo-experiments": "4.0.0-rc.6",
-    "pnpm": "^8.15.8",
-    "typescript": "^5.4.5",
-    "vue-tsc": "^1.8.27"
+    "pnpm": "^8.15.9",
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.0.29"
   },
   "pnpm": {
     "supportedArchitectures": {