feat(nuxt): add dedupe option for data fetching composables

docs/3.api/2.composables/use-async-data.md

@@ -64,6 +64,9 @@ const { data: posts } = await useAsyncData(
   - `pick`: only pick specified keys in this array from the `handler` function result
   - `watch`: watch reactive sources to auto-refresh
   - `deep`: return data in a deep ref object (it is `true` by default). It can be set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+  - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options: 
+    - `cancel` (or true) - cancels existing requests when a new one is made.
+    - `defer` (or false) - does not make new requests at all if there is a pending request.
 
 ::callout
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
@@ -100,11 +103,14 @@ function useAsyncData<DataT, DataE>(
   options?: AsyncDataOptions<DataT>
 ): Promise<AsyncData<DataT, DataE>
 
+type Dedupe = boolean | 'cancel' | 'defer'
+
 type AsyncDataOptions<DataT> = {
   server?: boolean
   lazy?: boolean
   immediate?: boolean
   deep?: boolean
+  dedupe?: Dedupe
   default?: () => DataT | Ref<DataT> | null
   transform?: (input: DataT) => DataT
   pick?: string[]
@@ -122,7 +128,7 @@ type AsyncData<DataT, ErrorT> = {
 };
 
 interface AsyncDataExecuteOptions {
-  dedupe?: boolean
+  dedupe?: Dedupe
 }
 
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'

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

@@ -34,6 +34,8 @@ export type KeyOfRes<Transform extends _Transform> = KeysOf<ReturnType<Transform
 
 export type MultiWatchSources = (WatchSource<unknown> | object)[]
 
+export type Dedupe = boolean | 'cancel' | 'defer'
+
 export interface AsyncDataOptions<
   ResT,
   DataT = ResT,
@@ -49,6 +51,7 @@ export interface AsyncDataOptions<
   watch?: MultiWatchSources
   immediate?: boolean
   deep?: boolean
+  dedupe?: Dedupe
 }
 
 export interface AsyncDataExecuteOptions {
@@ -58,7 +61,7 @@ export interface AsyncDataExecuteOptions {
    * not be cancelled, but their result will not affect the data/pending state - and any
    * previously awaited promises will not resolve until this new request resolves.
    */
-  dedupe?: boolean
+  dedupe?: Dedupe
 }
 
 export interface _AsyncData<DataT, ErrorT> {
@@ -72,6 +75,10 @@ export interface _AsyncData<DataT, ErrorT> {
 
 export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncData<Data, Error>>
 
+const deferDedupeSet = new Set(['defer', false])
+
+const isDefer = (dedupe?: Dedupe) => deferDedupeSet.has(dedupe || 'cancel')
+
 export function useAsyncData<
   ResT,
   DataE = Error,
@@ -150,6 +157,7 @@ export function useAsyncData<
   options.lazy = options.lazy ?? false
   options.immediate = options.immediate ?? true
   options.deep = options.deep ?? asyncDataDefaults.deep
+  options.dedupe = options.dedupe ?? 'cancel'
 
   const hasCachedData = () => ![null, undefined].includes(options.getCachedData!(key) as any)
 
@@ -172,7 +180,7 @@ export function useAsyncData<
 
   asyncData.refresh = asyncData.execute = (opts = {}) => {
     if (nuxt._asyncDataPromises[key]) {
-      if (opts.dedupe === false) {
+      if (isDefer(opts.dedupe ?? options.dedupe)) {
         // Avoid fetching same key more than once at a time
         return nuxt._asyncDataPromises[key]!
       }