import { onBeforeMount, onUnmounted, ref, getCurrentInstance } from 'vue' import type { Ref } from 'vue' import { NuxtApp, useNuxtApp } from '#app' export type _Transform = (input: Input) => Output export type PickFrom> = T extends Array ? T : T extends Record ? Pick : T export type KeysOf = Array export type KeyOfRes = KeysOf> export interface AsyncDataOptions< DataT, Transform extends _Transform = _Transform, PickKeys extends KeyOfRes<_Transform> = KeyOfRes > { server?: boolean defer?: boolean default?: () => DataT transform?: Transform pick?: PickKeys } export interface _AsyncData { data: Ref pending: Ref refresh: (force?: boolean) => Promise error?: any } export type AsyncData = _AsyncData & Promise<_AsyncData> const getDefault = () => null export function useAsyncData< DataT, Transform extends _Transform = _Transform, PickKeys extends KeyOfRes = KeyOfRes > ( key: string, handler: (ctx?: NuxtApp) => Promise, options: AsyncDataOptions = {} ) : AsyncData, PickKeys>> { // Validate arguments if (typeof key !== 'string') { throw new TypeError('asyncData key must be a string') } if (typeof handler !== 'function') { throw new TypeError('asyncData handler must be a function') } // Apply defaults options = { server: true, defer: false, default: getDefault, ...options } // Setup nuxt instance payload const nuxt = useNuxtApp() // Setup hook callbacks once per instance const instance = getCurrentInstance() if (!instance._nuxtOnBeforeMountCbs) { const cbs = instance._nuxtOnBeforeMountCbs = [] if (instance && process.client) { onBeforeMount(() => { cbs.forEach((cb) => { cb() }) cbs.splice(0, cbs.length) }) onUnmounted(() => cbs.splice(0, cbs.length)) } } const asyncData = { data: ref(nuxt.payload.data[key] ?? options.default()), pending: ref(true), error: ref(null) } as AsyncData 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 // TODO: Cancel previus promise // TODO: Handle immediate errors nuxt._asyncDataPromises[key] = Promise.resolve(handler(nuxt)) .then((result) => { if (options.transform) { result = options.transform(result) } if (options.pick) { result = pick(result, options.pick) as DataT } asyncData.data.value = result asyncData.error.value = null }) .catch((error: any) => { asyncData.error.value = error asyncData.data.value = options.default() }) .finally(() => { asyncData.pending.value = false nuxt.payload.data[key] = asyncData.data.value delete nuxt._asyncDataPromises[key] }) return nuxt._asyncDataPromises[key] } const fetchOnServer = options.server !== false const clientOnly = options.server === false // 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 Object.assign(asyncDataPromise, asyncData) // @ts-ignore return asyncDataPromise as AsyncData } function pick (obj: Record, keys: string[]) { const newObj = {} for (const key of keys) { newObj[key] = obj[key] } return newObj }