feat(nuxt): await parallel/blocking promises on route change

This commit is contained in:
Daniel Roe 2023-07-24 13:13:17 +00:00
parent a3d96714d4
commit eccd10645f
3 changed files with 13 additions and 4 deletions

View File

@ -2,6 +2,7 @@ import { defineComponent, h, nextTick, onMounted, provide, shallowReactive } fro
import type { Ref, VNode } from 'vue' import type { Ref, VNode } from 'vue'
import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router' import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router'
import { PageRouteSymbol } from '#app/components/injections' import { PageRouteSymbol } from '#app/components/injections'
import { useNuxtApp } from '#app/nuxt'
export const RouteProvider = defineComponent({ export const RouteProvider = defineComponent({
name: 'RouteProvider', name: 'RouteProvider',
@ -50,10 +51,18 @@ export const RouteProvider = defineComponent({
return () => { return () => {
if (process.dev && process.client) { if (process.dev && process.client) {
vnode = h(props.vnode, { ref: props.vnodeRef }) vnode = h(props.vnode, { ref: props.vnodeRef })
return vnode return [vnode, h(ResolvePendingPromises)]
} }
return h(props.vnode, { ref: props.vnodeRef }) return [h(props.vnode, { ref: props.vnodeRef }), h(ResolvePendingPromises)]
} }
} }
}) })
const ResolvePendingPromises = defineComponent({
async setup () {
const nuxtApp = useNuxtApp()
await Promise.all(Object.values(nuxtApp._asyncDataPromises).filter(p => p?.strategy !== 'lazy'))
},
render: () => null
})

View File

@ -215,7 +215,7 @@ export function useAsyncData<
} }
delete nuxt._asyncDataPromises[key] delete nuxt._asyncDataPromises[key]
}) })
nuxt._asyncDataPromises[key] = promise nuxt._asyncDataPromises[key] = Object.assign(promise, { strategy: options.strategy })
return nuxt._asyncDataPromises[key] return nuxt._asyncDataPromises[key]
} }

View File

@ -103,7 +103,7 @@ interface _NuxtApp {
[key: string]: unknown [key: string]: unknown
/** @internal */ /** @internal */
_asyncDataPromises: Record<string, Promise<any> | undefined> _asyncDataPromises: Record<string, Promise<any> & { strategy?: 'lazy' | 'blocking' | 'parallel' } | undefined>
/** @internal */ /** @internal */
_asyncData: Record<string, { _asyncData: Record<string, {
data: Ref<any> data: Ref<any>