mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 00:23:53 +00:00
feat(nuxt): custom cache support for data fetching composables (#20747)
This commit is contained in:
parent
f4d67a9bcd
commit
b52548d915
@ -31,6 +31,7 @@ type AsyncDataOptions<DataT> = {
|
||||
transform?: (input: DataT) => DataT
|
||||
pick?: string[]
|
||||
watch?: WatchSource[]
|
||||
getCachedData?: (key: string) => any
|
||||
}
|
||||
|
||||
type AsyncData<DataT, ErrorT> = {
|
||||
@ -61,6 +62,7 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
|
||||
* _transform_: a function that can be used to alter `handler` function result after resolving
|
||||
* _pick_: only pick specified keys in this array from the `handler` function result
|
||||
* _watch_: watch reactive sources to auto-refresh
|
||||
* _getCachedData_: a function that receives a cache key and can return cached data if it exists (by default it returns `nuxtApp.payload.data[key]` when hydrating and `nuxtApp.static.data[key]` after the app is hydrated). You can use this to build your own custom cache for `useAsyncData`.
|
||||
* _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.
|
||||
|
||||
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.
|
||||
|
@ -26,6 +26,7 @@ type UseFetchOptions<DataT> = {
|
||||
server?: boolean
|
||||
lazy?: boolean
|
||||
immediate?: boolean
|
||||
getCachedData?: (key: string) => any
|
||||
deep?: boolean
|
||||
default?: () => DataT
|
||||
transform?: (input: DataT) => DataT
|
||||
@ -73,6 +74,7 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
|
||||
* `transform`: a function that can be used to alter `handler` function result after resolving
|
||||
* `pick`: only pick specified keys in this array from the `handler` function result
|
||||
* `watch`: watch an array of reactive sources and auto-refresh the fetch result when they change. Fetch options and URL are watched by default. You can completely ignore reactive sources by using `watch: false`. Together with `immediate: false`, this allows for a fully-manual `useFetch`.
|
||||
* `getCachedData`: a function that receives a cache key and can return cached data if it exists (by default it returns `nuxtApp.payload.data[key]` when hydrating and `nuxtApp.static.data[key]` after the app is hydrated). You can use this to build your own custom cache for `useFetch`.
|
||||
* `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.
|
||||
|
||||
::alert{type=warning}
|
||||
|
@ -40,6 +40,7 @@ export interface AsyncDataOptions<
|
||||
server?: boolean
|
||||
lazy?: boolean
|
||||
default?: () => DefaultT | Ref<DefaultT>
|
||||
getCachedData?: (key: string) => DataT
|
||||
transform?: _Transform<ResT, DataT>
|
||||
pick?: PickKeys
|
||||
watch?: MultiWatchSources
|
||||
@ -60,15 +61,14 @@ export interface AsyncDataExecuteOptions {
|
||||
export interface _AsyncData<DataT, ErrorT> {
|
||||
data: Ref<DataT>
|
||||
pending: Ref<boolean>
|
||||
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||
refresh: (opts?: AsyncDataExecuteOptions) => Promise<DataT>
|
||||
execute: (opts?: AsyncDataExecuteOptions) => Promise<DataT>
|
||||
error: Ref<ErrorT | null>
|
||||
status: Ref<AsyncDataRequestStatus>
|
||||
}
|
||||
|
||||
export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncData<Data, Error>>
|
||||
|
||||
const getDefault = () => null
|
||||
export function useAsyncData<
|
||||
ResT,
|
||||
DataE = Error,
|
||||
@ -132,20 +132,22 @@ export function useAsyncData<
|
||||
throw new TypeError('[nuxt] [asyncData] handler must be a function.')
|
||||
}
|
||||
|
||||
// Setup nuxt instance payload
|
||||
const nuxt = useNuxtApp()
|
||||
|
||||
// Used to get default values
|
||||
const getDefault = () => null
|
||||
const getDefaultCachedData = () => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]
|
||||
|
||||
// Apply defaults
|
||||
options.server = options.server ?? true
|
||||
options.default = options.default ?? (getDefault as () => DefaultT)
|
||||
options.getCachedData = options.getCachedData ?? getDefaultCachedData
|
||||
|
||||
options.lazy = options.lazy ?? false
|
||||
options.immediate = options.immediate ?? true
|
||||
|
||||
// Setup nuxt instance payload
|
||||
const nuxt = useNuxtApp()
|
||||
|
||||
const getCachedData = () => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]
|
||||
const hasCachedData = () => ![null, undefined].includes(
|
||||
nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key]
|
||||
)
|
||||
const hasCachedData = () => ![null, undefined].includes(options.getCachedData!(key) as any)
|
||||
|
||||
// Create or use a shared asyncData entity
|
||||
if (!nuxt._asyncData[key] || !options.immediate) {
|
||||
@ -154,7 +156,7 @@ export function useAsyncData<
|
||||
const _ref = options.deep !== true ? shallowRef : ref
|
||||
|
||||
nuxt._asyncData[key] = {
|
||||
data: _ref(getCachedData() ?? options.default!()),
|
||||
data: _ref(options.getCachedData!(key) ?? options.default!()),
|
||||
pending: ref(!hasCachedData()),
|
||||
error: toRef(nuxt.payload._errors, key),
|
||||
status: ref('idle')
|
||||
@ -168,13 +170,13 @@ export function useAsyncData<
|
||||
if (nuxt._asyncDataPromises[key]) {
|
||||
if (opts.dedupe === false) {
|
||||
// Avoid fetching same key more than once at a time
|
||||
return nuxt._asyncDataPromises[key]
|
||||
return nuxt._asyncDataPromises[key]!
|
||||
}
|
||||
(nuxt._asyncDataPromises[key] as any).cancelled = true
|
||||
}
|
||||
// Avoid fetching same key that is already fetched
|
||||
if ((opts._initial || (nuxt.isHydrating && opts._initial !== false)) && hasCachedData()) {
|
||||
return getCachedData()
|
||||
return Promise.resolve(options.getCachedData!(key))
|
||||
}
|
||||
asyncData.pending.value = true
|
||||
asyncData.status.value = 'pending'
|
||||
@ -222,7 +224,7 @@ export function useAsyncData<
|
||||
delete nuxt._asyncDataPromises[key]
|
||||
})
|
||||
nuxt._asyncDataPromises[key] = promise
|
||||
return nuxt._asyncDataPromises[key]
|
||||
return nuxt._asyncDataPromises[key]!
|
||||
}
|
||||
|
||||
const initialFetch = () => asyncData.refresh({ _initial: true })
|
||||
@ -235,7 +237,7 @@ export function useAsyncData<
|
||||
if (getCurrentInstance()) {
|
||||
onServerPrefetch(() => promise)
|
||||
} else {
|
||||
nuxt.hook('app:created', () => promise)
|
||||
nuxt.hook('app:created', async () => { await promise })
|
||||
}
|
||||
}
|
||||
|
||||
@ -270,9 +272,9 @@ export function useAsyncData<
|
||||
if (options.watch) {
|
||||
watch(options.watch, () => asyncData.refresh())
|
||||
}
|
||||
const off = nuxt.hook('app:data:refresh', (keys) => {
|
||||
const off = nuxt.hook('app:data:refresh', async (keys) => {
|
||||
if (!keys || keys.includes(key)) {
|
||||
return asyncData.refresh()
|
||||
await asyncData.refresh()
|
||||
}
|
||||
})
|
||||
if (instance) {
|
||||
|
@ -107,6 +107,7 @@ export function useFetch<
|
||||
pick,
|
||||
watch,
|
||||
immediate,
|
||||
getCachedData,
|
||||
deep,
|
||||
...fetchOptions
|
||||
} = opts
|
||||
@ -123,6 +124,7 @@ export function useFetch<
|
||||
transform,
|
||||
pick,
|
||||
immediate,
|
||||
getCachedData,
|
||||
deep,
|
||||
watch: watch === false ? [] : [_fetchOptions, _request, ...(watch || [])]
|
||||
}
|
||||
|
@ -165,6 +165,15 @@ describe('useAsyncData', () => {
|
||||
await refreshNuxtData('key')
|
||||
expect(data.data.value).toMatchInlineSnapshot('"test"')
|
||||
})
|
||||
|
||||
it('allows custom access to a cache', async () => {
|
||||
const { data } = await useAsyncData(() => ({ val: true }), { getCachedData: () => ({ val: false }) })
|
||||
expect(data.value).toMatchInlineSnapshot(`
|
||||
{
|
||||
"val": false,
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
describe('errors', () => {
|
||||
|
Loading…
Reference in New Issue
Block a user