fix: refresh Nuxt data during preview on page change properly

nuxt-modules · Sep 18, 2023 · 30bb9f8 · 30bb9f8
1 parent e7a6a2b
commit 30bb9f8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { usePrismic, useAsyncData, refreshNuxtData } from '#imports'
+
+const { client } = usePrismic()
+const { data: doc, pending } = await useAsyncData('doc', async () => {
+	// eslint-disable-next-line no-console
+	console.log('start:doc')
+
+	const kitchen = await client.getSingle('kitchen_sink_2')
+
+	// eslint-disable-next-line no-console
+	console.log('end:doc')
+
+	return kitchen
+})
+</script>
+
 <template>
 	<div>
 		<div
@@ -6,7 +23,7 @@
 			Pending: {{ pending }}
 		</div>
 		<div v-if="!pending">
-			<prismic-link
+			<!-- <prismic-link
 				v-slot="{ href }"
 				:field="doc?.data.relation"
 			>
@@ -17,7 +34,7 @@
 				:field="{ link_type: 'Web', url: 'https://google.com' }"
 			>
 				{{ href }} bar
-			</prismic-link>
+			</prismic-link> -->
 			<prismic-rich-text
 				:field="doc?.data.richtext"
 			/>
@@ -27,13 +44,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { usePrismic, useAsyncData, refreshNuxtData } from '#imports'
-
-const { client } = usePrismic()
-const { data: doc, pending } = await useAsyncData('doc', () => client.getSingle('kitchen_sink_2'))
-</script>
-
 <style>
 a {
 	display: block;

diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -3,7 +3,7 @@ import { createPrismic } from '@prismicio/vue'
 
 import { PrismicModuleOptions } from '../types'
 import NuxtLink from '#app/components/nuxt-link'
-import { defineNuxtPlugin, useCookie, useRequestEvent, onNuxtReady, refreshNuxtData, useHead, useRuntimeConfig } from '#imports'
+import { defineNuxtPlugin, useCookie, useRequestEvent, onNuxtReady, refreshNuxtData, useHead, useRuntimeConfig, useRouter } from '#imports'
 
 // @ts-expect-error vfs cannot be resolved here
 import client from '#build/prismic/proxy/client'
@@ -49,7 +49,16 @@ export default defineNuxtPlugin((nuxtApp) => {
 					'preview' in session[key] &&
 					session[key].preview)
 				) {
-					onNuxtReady(() => refreshNuxtData())
+					let afterEachCalled = false
+					onNuxtReady(() => {
+						if (!afterEachCalled) {
+							refreshNuxtData()
+						}
+					})
+					useRouter().afterEach(() => {
+						afterEachCalled = true
+						refreshNuxtData()
+					})
 				}
 			} catch (error) {
 				// eslint-disable-next-line no-console