refactor(nuxt3): cleanup data fetching and improved useAsyncData (#699)

docs/content/2.app/3.data-fetching.md

@@ -24,7 +24,7 @@ Under the hood, `defer: false` uses `<Suspense>` to block the loading of the rou
 
 ```vue
 <script setup>
-const { data } = await asyncData('time', () => $fetch('/api/count'))
+const { data } = await useAsyncData('time', () => $fetch('/api/count'))
 </script>
 
 <template>

examples/async-data/pages/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
-    Page visits: {{ data.count }}
+    {{ data }}
+    <button :disabled="pending" @click="refresh">
+      Refrash Data
+    </button>
   </div>
 </template>
 
 <script setup>
-const { data } = await asyncData('time', () => $fetch('/api/count'))
+const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
 </script>

examples/async-data/server/api/count.js

@@ -1,3 +0,0 @@
-let ctr = 0
-
-export default () => ({ count: ++ctr })

examples/async-data/server/api/hello.js

@@ -0,0 +1 @@
+export default () => `Hello world! (Generated at ${new Date().toGMTString()})`

examples/with-vue-content-loader/pages/index.vue

@@ -35,7 +35,7 @@ import { ContentLoader } from 'vue-content-loader'
 export default defineNuxtComponent({
   components: { ContentLoader },
   setup () {
-    const { data, pending } = asyncData(
+    const { data, pending } = useAsyncData(
       'time',
       () =>
         new Promise(resolve =>

packages/bridge/src/runtime/composables.ts

@@ -8,10 +8,6 @@ export * from '@vue/composition-api'
 const mock = () => () => { throw new Error('not implemented') }
 
 export const useAsyncData = mock()
-export const asyncData = mock()
-export const useSSRRef = mock()
-export const useData = mock()
-export const useGlobalData = mock()
 export const useHydration = mock()
 
 // Runtime config helper

packages/kit/src/config/schema/_app.ts

@@ -317,7 +317,7 @@ export default {
     /** Set to false to disable the Nuxt `validate()` hook */
     validate: true,
     /** Set to false to disable the Nuxt `asyncData()` hook */
-    asyncData: true,
+    useAsyncData: true,
     /** Set to false to disable the Nuxt `fetch()` hook */
     fetch: true,
     /** Set to false to disable `$nuxt.isOnline` */

packages/kit/src/config/schema/generate.ts

@@ -60,7 +60,7 @@ export default {
    * @example
    * ```js
    * export default {
-   *   async asyncData ({ params, error, payload }) {
+   *   async useAsyncData ({ params, error, payload }) {
    *     if (payload) return { user: payload }
    *     else return { user: await backend.fetchUser(params.id) }
    *   }

packages/nuxt3/src/app/composables/asyncData.ts

@@ -1,119 +1,115 @@
-import { onBeforeMount, onUnmounted, ref, unref } from 'vue'
+import { onBeforeMount, onUnmounted, ref } from 'vue'
-import type { UnwrapRef, Ref } from 'vue'
+import type { Ref } from 'vue'
-
-import { ensureReactive, useGlobalData } from './data'
 import { NuxtApp, useNuxtApp } from '#app'
 
-export type AsyncDataFn<T> = (ctx?: NuxtApp) => Promise<T>
+export interface AsyncDataOptions<T> {
-
-export interface AsyncDataOptions {
   server?: boolean
   defer?: boolean
+  default?: () => T
 }
 
-export interface AsyncDataState<T> {
+export interface _AsyncData<T> {
-  data: UnwrapRef<T>
+  data: Ref<T>
   pending: Ref<boolean>
-  fetch: (force?: boolean) => Promise<UnwrapRef<T>>
+  refresh: (force?: boolean) => Promise<void>
   error?: any
 }
 
-export type AsyncDataResult<T> = AsyncDataState<T> & Promise<AsyncDataState<T>>
+export type AsyncData<T> = _AsyncData<T> & Promise<_AsyncData<T>>
 
-export function useAsyncData (defaults?: AsyncDataOptions) {
+const getDefault = () => null
-  const nuxt = useNuxtApp()
-  const onBeforeMountCbs: Array<() => void> = []
 
-  if (process.client) {
+export function useAsyncData<T extends Record<string, any>> (key: string, handler: (ctx?: NuxtApp) => Promise<T>, options: AsyncDataOptions<T> = {}): AsyncData<T> {
-    onBeforeMount(() => {
+  // Validate arguments
-      onBeforeMountCbs.forEach((cb) => { cb() })
+  if (typeof key !== 'string') {
-      onBeforeMountCbs.splice(0, onBeforeMountCbs.length)
+    throw new TypeError('asyncData key must be a string')
-    })
+  }
-
+  if (typeof handler !== 'function') {
-    onUnmounted(() => onBeforeMountCbs.splice(0, onBeforeMountCbs.length))
+    throw new TypeError('asyncData handler must be a function')
   }
 
-  nuxt._asyncDataPromises = nuxt._asyncDataPromises || {}
+  // Apply defaults
+  options = { server: true, defer: false, default: getDefault, ...options }
 
-  return function asyncData<T extends Record<string, any>> (
+  // Setup nuxt instance payload
-    key: string,
+  const nuxt = useNuxtApp()
-    handler: AsyncDataFn<T>,
-    options: AsyncDataOptions = {}
-  ): AsyncDataResult<T> {
-    if (typeof handler !== 'function') {
-      throw new TypeError('asyncData handler must be a function')
-    }
-    options = {
-      server: true,
-      defer: false,
-      ...defaults,
-      ...options
-    }
 
-    const globalData = useGlobalData(nuxt)
+  // Setup hook callbacks once per instance
-
+  const instance = getCurrentInstance()
-    const state = {
+  if (!instance._nuxtOnBeforeMountCbs) {
-      data: ensureReactive(globalData, key) as UnwrapRef<T>,
+    const cbs = instance._nuxtOnBeforeMountCbs = []
-      pending: ref(true)
+    if (instance && process.client) {
-    } as AsyncDataState<T>
+      onBeforeMount(() => {
-
+        cbs.forEach((cb) => { cb() })
-    const fetch = (force?: boolean): Promise<UnwrapRef<T>> => {
+        cbs.splice(0, cbs.length)
-      if (nuxt._asyncDataPromises[key] && !force) {
-        return nuxt._asyncDataPromises[key]
-      }
-      state.pending.value = true
-      nuxt._asyncDataPromises[key] = Promise.resolve(handler(nuxt)).then((result) => {
-        for (const _key in result) {
-          // @ts-expect-error
-          state.data[_key] = unref(result[_key])
-        }
-        return state.data
-      }).finally(() => {
-        state.pending.value = false
-        nuxt._asyncDataPromises[key] = null
       })
+      onUnmounted(() => cbs.splice(0, cbs.length))
+    }
+  }
+
+  const asyncData = {
+    data: ref(nuxt.payload.data[key] ?? options.default()),
+    pending: ref(true),
+    error: ref(null)
+  } as AsyncData<T>
+
+  asyncData.refresh = (force?: boolean) => {
+    // Avoid fetching same key more than once at a time
+    if (nuxt._asyncDataPromises[key] && !force) {
       return nuxt._asyncDataPromises[key]
     }
-
+    asyncData.pending.value = true
-    const fetchOnServer = options.server !== false
+    // TODO: Cancel previus promise
-    const clientOnly = options.server === false
+    // TODO: Handle immediate errors
-
+    nuxt._asyncDataPromises[key] = Promise.resolve(handler(nuxt))
-    // Server side
+      .then((result) => {
-    if (process.server && fetchOnServer) {
+        asyncData.data.value = result
-      fetch()
+        asyncData.error.value = null
-    }
+      })
-
+      .catch((error: any) => {
-    // Client side
+        asyncData.error.value = error
-    if (process.client) {
+        asyncData.data.value = options.default()
-      // 1. Hydration (server: true): no fetch
+      })
-      if (nuxt.isHydrating && fetchOnServer) {
+      .finally(() => {
-        state.pending.value = false
+        asyncData.pending.value = false
-      }
+        nuxt.payload.data[key] = asyncData.data.value
-      // 2. Initial load (server: false): fetch on mounted
+        delete nuxt._asyncDataPromises[key]
-      if (nuxt.isHydrating && clientOnly) {
+      })
-        // Fetch on mounted (initial load or deferred fetch)
+    return nuxt._asyncDataPromises[key]
-        onBeforeMountCbs.push(fetch)
-      } else if (!nuxt.isHydrating) { // Navigation
-        if (options.defer) {
-          // 3. Navigation (defer: true): fetch on mounted
-          onBeforeMountCbs.push(fetch)
-        } else {
-          // 4. Navigation (defer: false): await fetch
-          fetch()
-        }
-      }
-    }
-
-    const res = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => state) as AsyncDataResult<T>
-    res.data = state.data
-    res.pending = state.pending
-    res.fetch = fetch
-    return res
   }
-}
 
-export function asyncData<T extends Record<string, any>> (
+  const fetchOnServer = options.server !== false
-  key: string, handler: AsyncDataFn<T>, options?: AsyncDataOptions
+  const clientOnly = options.server === false
-): AsyncDataResult<T> {
+
-  return useAsyncData()(key, handler, options)
+  // Server side
+  if (process.server && fetchOnServer) {
+    asyncData.refresh()
+  }
+
+  // Client side
+  if (process.client) {
+    // 1. Hydration (server: true): no fetch
+    if (nuxt.isHydrating && fetchOnServer) {
+      asyncData.pending.value = false
+    }
+    // 2. Initial load (server: false): fetch on mounted
+    if (nuxt.isHydrating && clientOnly) {
+      // Fetch on mounted (initial load or deferred fetch)
+      instance._nuxtOnBeforeMountCbs.push(asyncData.refresh)
+    } else if (!nuxt.isHydrating) { // Navigation
+      if (options.defer) {
+        // 3. Navigation (defer: true): fetch on mounted
+        instance._nuxtOnBeforeMountCbs.push(asyncData.refresh)
+      } else {
+        // 4. Navigation (defer: false): await fetch
+        asyncData.refresh()
+      }
+    }
+  }
+
+  // Allow directly awaiting on asyncData
+  const asyncDataPromise = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => asyncData) as AsyncData<T>
+  Object.assign(asyncDataPromise, asyncData)
+
+  return asyncDataPromise as AsyncData<T>
 }

packages/nuxt3/src/app/composables/component.ts

@@ -4,7 +4,7 @@ import type { DefineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import type { LegacyContext } from '../legacy'
 import { useNuxtApp } from '../nuxt'
-import { asyncData } from './asyncData'
+import { useAsyncData } from './asyncData'
 
 export const NuxtComponentIndicator = '__nuxt_component'
 
@@ -14,7 +14,7 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
   const vm = getCurrentInstance()
   const { fetchKey } = vm.proxy.$options
   const key = typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey || route.fullPath
-  const { data } = await asyncData(`options:asyncdata:${key}`, () => fn(nuxt._legacyContext))
+  const { data } = await useAsyncData(`options:asyncdata:${key}`, () => fn(nuxt._legacyContext))
   Object.assign(await res, toRefs(data))
 }
 

packages/nuxt3/src/app/composables/data.ts

@@ -1,65 +0,0 @@
-import { getCurrentInstance, isReactive, reactive } from 'vue'
-import type { UnwrapRef } from 'vue'
-import { useNuxtApp } from '#app'
-
-export function ensureReactive<
-  T extends Record<string, any>,
-  K extends keyof T
-> (data: T, key: K): UnwrapRef<T[K]> {
-  if (!isReactive(data[key])) {
-    data[key] = reactive(data[key] || ({} as T[K]))
-  }
-  return data[key]
-}
-
-/**
- * Returns a unique string suitable for syncing data between server and client.
- *
- * @param nuxt (optional) A Nuxt instance
- * @param vm (optional) A Vue component - by default it will use the current instance
- */
-export function useSSRRef (nuxt = useNuxtApp(), vm = getCurrentInstance()): string {
-  if (!vm) {
-    throw new Error('This must be called within a setup function.')
-  }
-
-  // Server
-  if (process.server) {
-    if (!vm.attrs['data-ssr-ref']) {
-      nuxt._refCtr = nuxt._refCtr || 1
-      vm.attrs['data-ssr-ref'] = String(nuxt._refCtr++)
-    }
-    return vm.attrs['data-ssr-ref'] as string
-  }
-
-  // Client
-  /* TODO: unique value for multiple calls */
-  return vm.vnode.el?.dataset?.ssrRef || String(Math.random())
-}
-
-/**
- * Allows accessing reactive data that can be synced between server and client.
- *
- * @param nuxt (optional) A Nuxt instance
- * @param vm (optional) A Vue component - by default it will use the current instance
- */
-export function useData<T = Record<string, any>> (
-  nuxt = useNuxtApp(),
-  vm = getCurrentInstance()
-): UnwrapRef<T> {
-  const ssrRef = useSSRRef(nuxt, vm)
-
-  nuxt.payload.data = nuxt.payload.data || {}
-
-  return ensureReactive(nuxt.payload.data, ssrRef)
-}
-
-/**
- * Allows accessing reactive global data that can be synced between server and client.
- *
- * @param nuxt - (optional) A Nuxt instance
- */
-export function useGlobalData (nuxt = useNuxtApp()): Record<string, any> {
-  nuxt.payload.data = nuxt.payload.data || {}
-  return nuxt.payload.data
-}

packages/nuxt3/src/app/composables/index.ts

@@ -1,4 +1,3 @@
 export { defineNuxtComponent } from './component'
-export { useAsyncData, asyncData } from './asyncData'
+export { useAsyncData } from './asyncData'
-export { useData } from './data'
 export { useHydration } from './hydrate'

packages/nuxt3/src/app/nuxt.ts

@@ -70,8 +70,9 @@ export function createNuxtApp (options: CreateOptions) {
   const nuxt: NuxtApp = {
     provide: undefined,
     globalName: 'nuxt',
-    payload: {},
+    payload: reactive(process.server ? { serverRendered: true, data: {} } : (window.__NUXT__ || { data: {} })),
     isHydrating: process.client,
+    _asyncDataPromises: {},
     ...options
   } as any as NuxtApp
 
@@ -95,20 +96,11 @@ export function createNuxtApp (options: CreateOptions) {
   }
 
   if (process.server) {
-    nuxt.payload = {
-      serverRendered: true
-    }
-
-    nuxt.ssrContext = nuxt.ssrContext || {}
-
     // Expose to server renderer to create window.__NUXT__
+    nuxt.ssrContext = nuxt.ssrContext || {}
     nuxt.ssrContext.payload = nuxt.payload
   }
 
-  if (process.client) {
-    nuxt.payload = window.__NUXT__ || {}
-  }
-
   // Expose runtime config
   if (process.server) {
     nuxt.provide('config', options.ssrContext.runtimeConfig.private)

packages/nuxt3/src/app/types/shims.d.ts

@@ -33,4 +33,7 @@ declare module '@vue/runtime-core' {
   interface App<HostElement> {
     $nuxt: NuxtApp
   }
+  interface ComponentInternalInstance {
+    _nuxtOnBeforeMountCbs: Function[]
+  }
 }

packages/nuxt3/src/global-imports/identifiers.ts

@@ -1,7 +1,6 @@
 const identifiers = {
   '#app': [
     'useAsyncData',
-    'asyncData',
     'defineNuxtComponent',
     'useNuxtApp',
     'defineNuxtPlugin',