59 serverside caching (#61)

* serverside caching * node3 needs to be set * chore(release): v0.2.22 * do not use serverside cach in staging mode * chore(release): v0.2.23 * fix useWPNuxt import * chore(release): v0.2.24 * /api/purgeCache & isStaging composable * chore(release): v0.2.25 * (temp) debug staging issue * chore(release): v0.2.26 * disable fetch cache in staging mode * chore(release): v0.2.27 * remove debug logging * cleanup * chore(release): v0.2.28 * chore(release): v0.2.28 * chore(release): v0.3.0 * re-enable getCachedData * re-add lint before release
wpnuxt · Apr 16, 2024 · 4efe0ae · 4efe0ae
1 parent 099d4a0
commit 4efe0ae
Show file tree

Hide file tree

Showing 36 changed files with 1,591 additions and 692 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,58 @@
 # Changelog
 
 
+## v0.3.0
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.28...v0.3.0)
+
+### 🏡 Chore
+
+- **release:** V0.2.28 ([c0efcab](https://github.com/vernaillen/wpnuxt-module/commit/c0efcab))
+
+### ❤️ Contributors
+
+- Wouter Vernaillen <[email protected]>
+
+## v0.2.28
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.28...v0.2.28)
+
+## v0.2.28
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.27...v0.2.28)
+
+## v0.2.27
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.26...v0.2.27)
+
+## v0.2.26
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.25...v0.2.26)
+
+## v0.2.25
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.24...v0.2.25)
+
+## v0.2.24
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.23...v0.2.24)
+
+## v0.2.23
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.22...v0.2.23)
+
+## v0.2.22
+
+[compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.21...v0.2.22)
+
+### 🏡 Chore
+
+- **release:** V0.2.21 ([6d1460c](https://github.com/vernaillen/wpnuxt-module/commit/6d1460c))
+
+### ❤️ Contributors
+
+- Wouter Vernaillen <[email protected]>
+
 ## v0.2.21
 
 [compare changes](https://github.com/vernaillen/wpnuxt-module/compare/v0.2.20...v0.2.21)

diff --git a/docs/content/1.getting-started/1.installation.md b/docs/content/1.getting-started/1.installation.md
@@ -51,7 +51,7 @@ Connect WPNuxt to your wordpress installation:
         showBlockInfo: false,
         debug: false,
         replaceSchema: false,
-        enableMultiCache: false
+        enableCache: true
     },
 ```
 Include the protocol.

diff --git a/docs/content/1.getting-started/2.caching.md b/docs/content/1.getting-started/2.caching.md
@@ -2,42 +2,3 @@
 title: Caching
 description: 
 ---
-
-## nuxt-multi-cache
-
-WPNuxt can use nuxt-multi-cache to cache the data that's being fetched from wordpress.
-
-nuxt-multi-cache is enabled by default, but can be disabled by setting enableMultiCache to true:
-```
-    wpNuxt: {
-        ...
-        enableMultiCache: false
-    },
-```
-
-These are the settings that WPNuxt is using by default:
-```
-  multiCache: {
-    debug: false,
-    component: {
-      enabled: false,
-    },
-    route: {
-      enabled: true,
-    },
-  },
-```
-
-You can override this in nuxt.config.ts of your app. For example if you'd want to enable debug mode, use component caching or turn off the route caching:
-```
-  multiCache: {
-    debug: true,
-    component: {
-      enabled: true,
-    },
-    route: {
-      enabled: false,
-    },
-  },
-```
-At the moment this can only be overridden by adding the multicache module as a dependency in your app too.
diff --git a/docs/content/2.under-the-hood/1.dependencies.md b/docs/content/2.under-the-hood/1.dependencies.md
@@ -12,9 +12,5 @@ https://github.com/dulnan/nuxt-graphql-middleware
 ## @graphql-codegen
 
 
-## Nuxt Multi Cache for Nuxt 3
-
-https://github.com/dulnan/nuxt-multi-cache
-
 ## Nuxt Image
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vernaillen/wpnuxt",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "description": "WPNuxt",
   "repository": "vernaillen/wpnuxt-module",
   "license": "MIT",
@@ -50,7 +50,6 @@
     "@vueuse/nuxt": "^10.9.0",
     "defu": "^6.1.4",
     "nuxt-graphql-middleware": "^4.0.0",
-    "nuxt-multi-cache": "^3.1.1",
     "ohash": "^1.1.3",
     "unstorage": "^1.10.2"
   },
@@ -76,4 +75,4 @@
     "vitest": "^1.4.0",
     "vue-tsc": "^2.0.11"
   }
-}
+}
diff --git a/playground/.env-example b/playground/.env-example
@@ -5,4 +5,5 @@ WPNUXT_FRONTEND_URL=http://localhost:3000
 WPNUXT_FAUST_SECRET_KEY=yourKey
 WPNUXT_SHOW_BLOCK_INFO=true
 WPNUXT_DEBUG=true
-WPNUXT_ENABLE_MULTI_CACHE=false
+WPNUXT_ENABLE_CACHE=true
+WPNUXT_STAGING=false
diff --git a/playground/app.vue b/playground/app.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const config = useRuntimeConfig();
 const stagingUrl = config.public.wpNuxt.stagingUrl
-const menu = await useMenu('main')
+const { data: menu } = await useMenu('main')
 const userName = ref<String>()
 userName.value = getCurrentUserName()
 watch(() => getCurrentUserName(), (newVal) => {
     userName.value = newVal
 })
-const wpLinks = menu.data.map((page) => ({
+const wpLinks = menu.map((page) => ({
   label: page.label,
   to: page.uri
 }))
@@ -18,20 +18,20 @@ const links = [
     to: '/test'
   }
 ]
-const isStaging = useWPNuxt().isStaging
+const staging = await isStaging()
 </script>
 
 <template>
-  <StagingBanner v-if="isStaging" />
-  <div :class="isStaging ? 'mt-[34px]' : 'mt-0'">
+  <StagingBanner v-if="staging" />
+  <div :class="staging ? 'mt-[34px]' : 'mt-0'">
     <UHeader :links="links">
       <template #logo>
         <WPNuxtLogo /> <span class="text-lg">playground</span>
       </template>
       <template #right>
         <UColorModeButton variant="soft" />
         <UButton
-          v-if="!isStaging"
+          v-if="!staging"
           :to="stagingUrl"
           icon="i-heroicons-pencil"
           variant="soft"

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -18,7 +18,8 @@ export default defineNuxtConfig({
     showBlockInfo: false,
     debug: false,
     replaceSchema: false,
-    enableMultiCache: true
+    enableCache: true,
+    staging: false,
   },
   graphqlMiddleware: {
     downloadSchema: true,

diff --git a/playground/pages/[...slug].vue b/playground/pages/[...slug].vue
@@ -2,18 +2,18 @@
 <script setup lang="ts">
 const route = useRoute();
 const post = await usePostByUri(route.params.slug[0])
-const isStaging = useWPNuxt().isStaging
 const wpUri = useWPUri()
 if (post?.data?.title) {
     useHead({
         title: post.data.title
     })
 }
+const staging = await isStaging()
 </script>
 <template>
   <div>
     <StagingBanner
-      v-if="isStaging"
+      v-if="staging"
       :post="post.data"
     />
     <UContainer>
@@ -55,7 +55,7 @@ if (post?.data?.title) {
               {{ post.data.seo.metaDesc }}
             </div>
             <div
-              v-if="isStaging"
+              v-if="staging"
               class="test-sm mt-5"
             >
               <UButton

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-const posts = await usePosts()
-const settings = await useSettings()
+const { data: posts } = await usePosts()
+const { data: settings } = await useSettings()
+const { data: latestPost } = await useLatestPost()
 useHead({
   title: settings.title
 })
@@ -16,20 +17,37 @@ useHead({
     >
       <UPageGrid>
         <ULandingCard
-          v-for="post, index in posts.data"
+          v-for="post, index in posts"
           :key="index"
           :title="post.title"
           :description="post.date.split('T')[0]"
           :to="post.uri"
         >
           <img
-            v-if="post.data?.featuredImage?.node?.sourceUrl"
+            v-if="post?.featuredImage?.node?.sourceUrl"
             :src="post.featuredImage.node.sourceUrl"
             class="w-full rounded-md"
           >
           <span v-html="post.excerpt" />
         </ULandingCard>
       </UPageGrid>
     </ULandingSection>
+    <ULandingSection
+      id="posts"
+      title="Latest Post"
+    >
+      <ULandingCard
+        :title="latestPost.title"
+        :description="latestPost.date.split('T')[0]"
+        :to="latestPost.uri"
+      >
+        <img
+          v-if="latestPost?.featuredImage?.node?.sourceUrl"
+          :src="latestPost.featuredImage.node.sourceUrl"
+          class="w-full rounded-md"
+        >
+        <span v-html="latestPost.excerpt" />
+      </ULandingCard>
+    </ULandingSection>
   </div>
 </template>
diff --git a/playground/pages/test.vue b/playground/pages/test.vue
@@ -3,6 +3,7 @@ const wpUri = useWPUri();
 const viewer = await useViewer()
 const settings = await useSettings()
 const revisions = await useRevisions()
+const staging = await isStaging()
 const userName = getCurrentUserName()
 
 const config = useRuntimeConfig()
@@ -25,8 +26,8 @@ const wpNuxtConfig = config.public.wpNuxt
       <h2>getCurrentUserName()</h2>
       {{ userName }}
       <UDivider />
-      <h2>useWPNuxt()</h2>
-      <pre>{{ useWPNuxt() }}</pre>
+      <h2>isStaging()</h2>
+      <pre>{{ staging }}</pre>
 
       <UDivider />
       <h2>useSettings()</h2>