From 2a61b48ae3f9c2bb483b21294ac6e1824e3924b4 Mon Sep 17 00:00:00 2001
From: Wouter Vernaillen <wouter@vernaillen.com>
Date: Mon, 15 Jan 2024 12:05:34 +0700
Subject: [PATCH] WPNUX-15 configurable menu item

---
 src/module.ts                      |  3 +++
 src/runtime/composables/useMenu.ts |  9 +++++++--
 src/runtime/composables/usePage.ts | 13 ++++++-------
 src/runtime/queries/wp.gql         |  5 +++--
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/module.ts b/src/module.ts
index 1355243..50672d7 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -33,6 +33,8 @@ export default defineNuxtModule<ModuleOptions>({
     })
     logger.start('WPNuxt ::: Starting setup ::: ')
     logger.info('Connecting GraphQL to', options.wordpressUrl)
+    logger.info('Configured frontendUrl:', nuxt.options.runtimeConfig.public.frontendSiteUrl)
+
     logger.debug('Debug mode enabled')
 
     const resolver = createResolver(import.meta.url)
@@ -108,6 +110,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     await installModule('@vueuse/nuxt', {})
     await installModule('nuxt-multi-cache', {
+      debug: true,
       route: {
         enabled: true
       },
diff --git a/src/runtime/composables/useMenu.ts b/src/runtime/composables/useMenu.ts
index e5ebbf7..449bee0 100644
--- a/src/runtime/composables/useMenu.ts
+++ b/src/runtime/composables/useMenu.ts
@@ -1,15 +1,20 @@
 import { ref, useNuxtData, useFetch, createError, useTokens } from "#imports"
 
-const _useMenu = async () => {
+const _useMenu = async (name?: string) => {
     const menu = ref()
-    const cacheKey = 'menu'
+    const cacheKey = 'menu-' + name ? name : 'main'
     const cachedMenu = useNuxtData(cacheKey.value)
     const tokens = useTokens()
 
+    console.log('useMenu, slug: ', name)
+
     if (cachedMenu.data.value) {
         menu.value = cachedMenu.data.value
     } else {
         const { data, error } = await useFetch('/api/graphql_middleware/query/Menu', {
+            params: {
+              name: name
+            },
             key: cacheKey,
             headers: {
               Authorization: tokens.authorizationHeader
diff --git a/src/runtime/composables/usePage.ts b/src/runtime/composables/usePage.ts
index d7494aa..6bebc8d 100644
--- a/src/runtime/composables/usePage.ts
+++ b/src/runtime/composables/usePage.ts
@@ -3,16 +3,16 @@ import { ref, computed, useNuxtData, useTokens, useFetch, createError, useWPNuxt
 const _usePageById = async (id: number, asPreview?: boolean) => {
   const logger = useWPNuxtLogger()
   const page = ref()
-  //const cacheKey = computed(() => `page-${id}`)
+  const cacheKey = computed(() => `page-${id}`)
 
   const tokens = useTokens()
-  //const cachedPage = useNuxtData(cacheKey.value)
+  const cachedPage = useNuxtData(cacheKey.value)
 
-  /*if (cachedPage.data.value) {
+  if (cachedPage.data.value) {
     page.value = cachedPage.data.value
-  } else {*/
+  } else {
     const { data, pending, refresh, error } = await useFetch("/api/graphql_middleware/query/PageById/", {
-      //key: cacheKey.value,
+      key: cacheKey.value,
       params: {
         id: id,
         asPreview: asPreview
@@ -28,9 +28,8 @@ const _usePageById = async (id: number, asPreview?: boolean) => {
       logger.error('usePageById, error: ', error.value)
       throw createError({ statusCode: 500, message: 'Error fetching PageById', fatal: true })
     }
-    logger.debug('usePageById: fetched page from WordPress: ', data.value.title)
     page.value = data.value
-  //}
+  }
   return {
     data: page.value
   }
diff --git a/src/runtime/queries/wp.gql b/src/runtime/queries/wp.gql
index 92b824f..d99e6dd 100644
--- a/src/runtime/queries/wp.gql
+++ b/src/runtime/queries/wp.gql
@@ -227,9 +227,10 @@ query Settings {
     timeFormat
   }
 }
-query Menu($id: ID! = "dGVybTo0") {
-  menu(id: $id) {
+query Menu($name: ID! = "main", $idType: MenuNodeIdTypeEnum! = NAME) {
+  menu(id: $name, idType: $idType) {
     id
+    name
     menuItems {
       nodes {
         label