fix client side rendering (#29)

* added useNuxtData cache in useMenu() composable
* gray buttons in stagingBanner
* re-enable nuxt-multi-cache
* post cache with useNuxtData
* update staging banner
* chore(release): v0.2.5

CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
 
+## v0.2.5
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.4...v0.2.5)
+
+## v0.2.4
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.3...v0.2.4)
+
+## v0.2.3
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.2...v0.2.3)
+
+## v0.2.2
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.1...v0.2.2)
+
 ## v0.2.1
 
 [compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.0...v0.2.1)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vernaillen/wpnuxt",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "WPNuxt",
   "repository": "vernaillen/wpnuxt-module",
   "license": "MIT",

src/module.ts

@@ -119,7 +119,7 @@ export default defineNuxtModule<ModuleOptions>({
     }
 
     await installModule('@vueuse/nuxt', {})
-    /*await installModule('nuxt-multi-cache', {
+    await installModule('nuxt-multi-cache', {
       debug: nuxt.options.runtimeConfig.public.wpNuxt.debug,
       route: {
         enabled: true
@@ -133,7 +133,7 @@ export default defineNuxtModule<ModuleOptions>({
         authorization: 'wpnuxt-cache',
         cacheTagInvalidationDelay: 60000
       }
-    })*/
+    })
 
     const queryOutputPath = resolver.resolve(nuxt.options.rootDir + '/queries/')
 
@@ -182,16 +182,16 @@ export default defineNuxtModule<ModuleOptions>({
       outputDocuments: true,
       autoImportPatterns: queryOutputPath
     })
-    /*const resolvedMCPath = resolver.resolve('./runtime/app/multiCache.serverOptions')
+    const resolvedMCPath = resolver.resolve('./runtime/app/multiCache.serverOptions')
     const templateMC = addTemplate({
         filename: 'multiCache.serverOptions',
         write: true,
         getContents: () => `export { default } from '${resolvedMCPath}'`
-    })*/
+    })
     nuxt.options.nitro.externals = nuxt.options.nitro.externals || {}
     nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || []
-    /*nuxt.options.nitro.externals.inline.push(templateMC.dst)
-    nuxt.options.alias['#multi-cache-server-options'] = templateMC.dst*/
+    nuxt.options.nitro.externals.inline.push(templateMC.dst)
+    nuxt.options.alias['#multi-cache-server-options'] = templateMC.dst
 
     const resolvedPath = resolver.resolve('./runtime/app/graphqlMiddleware.serverOptions')
     const template = addTemplate({

src/runtime/components/StagingBanner.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useRuntimeConfig, ref, watch, useHead } from '#imports';
+import { useRuntimeConfig, ref, watch, useHead, useRoute } from '#imports';
+import { usePostByUri } from '../composables/usePost';
 import { useWPUri } from '../composables/useWPUri';
 import { getCurrentUserName } from '../composables/user';
-import type { Post } from '#graphql-operations';
-defineProps<{
-  post?: Post
-}>()
+
 const config = useRuntimeConfig();
 const frontendUrl = config.public.wpNuxt.frontendUrl
 const wordpressUrl = config.public.wpNuxt.wordpressUrl
@@ -24,17 +22,26 @@ useHead({
     }
   ]
 })
+
+const route = useRoute();
+const uri = route.path === '/' ? 'home' : route.path
+const post = await usePostByUri(uri)
+if (post?.data?.title) {
+    useHead({
+        title: 'Edit ' + post.data.contentTypeName + post.data.title
+    })
+}
 </script>
 <template>
   <div
     id="wpadminbar"
-    class="h-[34px] w-full fixed top-0 bg-gray-50 border-b border-gray-100 shadow-lg"
+    class="h-[34px] w-full fixed top-0 left-0 right-0 bg-gray-50 border-b border-gray-100 shadow-lg"
     style="z-index: 9999;"
   >
     <UContainer class="p-1">
-      <div class="grid grid-cols-2">
-        <div class="text-left align-top">
-          <div class="inline-flex mr-10">
+      <div class="flex w-full">
+        <div class="grow text-left align-top">
+          <div class="inline-flex mr-6 sm:mr-10">
             <WPNuxtLogo class="-mt-2 inline-flex" />
           </div>
           <div
@@ -43,36 +50,38 @@ useHead({
             <UButton
               size="2xs"
               variant="outline"
+              color="gray"
               icon="i-mdi-wordpress"
               :to="wpUri.admin"
               class="mr-2"
             >
-              WP Admin
+              WP<span class="hidden sm:inline-flex"> Admin</span>
             </UButton>
           </div>
           <div
-            v-if="post"
+            v-if="post?.data"
             class="inline-flex"
           >
             <UButton
               size="2xs"
               icon="i-heroicons-pencil"
-              :to="wpUri.postEdit('' + post.databaseId)"
+              :to="wpUri.postEdit('' + post.data.databaseId)"
             >
-              Edit {{ post.contentTypeName }}
+              Edit {{ post.data.contentTypeName }}
             </UButton>
           </div>
         </div>
-        <div class="text-right align-top">
+        <div class="flex-none justify-end text-right align-top">
           <UButton
             size="2xs"
             class="shadow-md align-top mr-2"
             variant="outline"
+            color="gray"
             :to="frontendUrl"
             target="_blank"
             trailing-icon="i-uil-external-link-alt"
           >
-            Open live site
+            Live site
           </UButton>
         </div>
       </div>

src/runtime/composables/useMenu.ts

@@ -1,30 +1,39 @@
-import { useFetch, createError, useRuntimeConfig } from "#imports"
-import { useTokens } from "./useTokens";
+import { useFetch, createError, useRuntimeConfig, ref, useNuxtData, computed } from "#imports"
+import { useTokens } from "./useTokens"
 import { useWPNuxtLogger } from "./useWPNuxtlogger";
 
 const _useMenu = async (name?: string) => {
+    const menu = ref()
     const logger = useWPNuxtLogger()
     const config = useRuntimeConfig()
     const menuName = name && name.length > 0 ? name : config.public.wpNuxt.defaultMenuName
     const tokens = useTokens()
+    const cacheKey =  computed(() => `menu-${name}`)
+    const cachedMenu = useNuxtData(cacheKey.value)
 
-    const { data, error } = await useFetch('/api/graphql_middleware/query/Menu', {
-        params: {
-          name: menuName
-        },
-        headers: {
-          Authorization: tokens.authorizationHeader
-        },
-        transform (data: any) {
-            return data.data.menu.menuItems.nodes;
-        }
-    });
-    if (error.value) {
-        logger.error('useMenu, error: ', error.value)
-        throw createError({ statusCode: error.value.status, message: error.value.message, fatal: true })
+    if (cachedMenu.data.value) {
+      menu.value = cachedMenu.data.value
+    } else {
+      const { data, error } = await useFetch('/api/graphql_middleware/query/Menu', {
+          key: cacheKey.value,
+          params: {
+            name: menuName
+          },
+          headers: {
+            Authorization: tokens.authorizationHeader
+          },
+          transform (data: any) {
+              return data.data.menu.menuItems.nodes;
+          }
+      });
+      if (error.value) {
+          logger.error('useMenu, error: ', error.value)
+          throw createError({ statusCode: error.value.status, message: error.value.message, fatal: true })
+      }
+      menu.value = data.value
     }
     return {
-      data: data.value
+      data: menu.value
     }
 }
 

src/runtime/composables/usePost.ts

@@ -1,62 +1,75 @@
-import { useFetch, createError } from "#imports"
+import { useFetch, createError, ref, useNuxtData, computed } from "#imports"
 import { useTokens } from "./useTokens";
 import { useWPNuxtLogger } from "./useWPNuxtlogger";
 
 const _usePostByUri = async (uri: string) => {
+    const post = ref()
     const logger = useWPNuxtLogger()
     const tokens = useTokens()
+    const cacheKey =  computed(() => `post-${uri}`)
+    const cachedPost = useNuxtData(cacheKey.value)
 
-    logger.debug('usePostByUri, fetching post for uri: ', uri)
-    const { data, error } = await useFetch("/api/graphql_middleware/query/PostByUri/", {
-        params: {
-            uri: uri
-        },
-        headers: {
-          Authorization: tokens.authorizationHeader
-        },
-        transform (data: any) {
-            return data.data.nodeByUri;
-        }
-    })
-    if (error.value) {
-        logger.error('usePostByUri, error: ', error.value)
-        throw createError({ statusCode: error.value.status, message: error.value.message, fatal: true })
-    }
-    if (data?.value) {
-      logger.debug('usePostByUri, successfully fetched post: ', data.value.title)
+    if (cachedPost.data.value) {
+      post.value = cachedPost.data.value
     } else {
-      logger.debug('usePostByUri, data is empty')
+      const { data, error } = await useFetch("/api/graphql_middleware/query/PostByUri/", {
+          key: cacheKey.value,
+          params: {
+              uri: uri
+          },
+          headers: {
+            Authorization: tokens.authorizationHeader
+          },
+          transform (data: any) {
+              return data.data.nodeByUri;
+          }
+      })
+      if (error.value) {
+          logger.error('usePostByUri, error: ', error.value)
+          throw createError({ statusCode: error.value.status, message: error.value.message, fatal: true })
+      }
+      post.value = data.value
     }
     return {
-      data: data.value
+      data: post.value
     }
 }
 const _usePostById = async (id: number, asPreview?: boolean) => {
+  const post = ref()
   const logger = useWPNuxtLogger()
   const tokens = useTokens()
-  const { data, error } = await useFetch("/api/graphql_middleware/query/PostById/", {
-    params: {
-      id: id,
-      asPreview: asPreview ? true : false
-    },
-    headers: {
-      Authorization: tokens.authorizationHeader
-    },
-    transform (data: any) {
-      return data.data.post;
+  const cacheKey =  computed(() => `post-${id}`)
+  const cachedPost = useNuxtData(cacheKey.value)
+
+  if (cachedPost.data.value) {
+    post.value = cachedPost.data.value
+  } else {
+    const { data, error } = await useFetch("/api/graphql_middleware/query/PostById/", {
+      key: cacheKey.value,
+      params: {
+        id: id,
+        asPreview: asPreview ? true : false
+      },
+      headers: {
+        Authorization: tokens.authorizationHeader
+      },
+      transform (data: any) {
+        return data.data.post;
+      }
+    })
+    if (error.value) {
+      logger.error('usePostByUId, error: ', error.value)
+      throw createError({ statusCode: 500, message: 'Error fetching PostById', fatal: true })
     }
-  })
-  if (error.value) {
-    logger.error('usePostByUId, error: ', error.value)
-    throw createError({ statusCode: 500, message: 'Error fetching PostById', fatal: true })
+    post.value = data.value
   }
-  if (data?.value) {
-    logger.debug('usePostById, successfully fetched post: ', data.value.title)
+  if (post.value) {
+    logger.debug('usePostById, successfully fetched post: ', post.value.title)
   } else {
     logger.debug('usePostById, data is empty')
   }
   return {
-    data: data.value
+    data: post.value
   }
 }