diff --git a/docs/api/use-api-party-data.md b/docs/api/use-api-party-data.md index eff5485..df9a754 100644 --- a/docs/api/use-api-party-data.md +++ b/docs/api/use-api-party-data.md @@ -18,29 +18,37 @@ function useApiPartyData( opts?: UseApiDataOptions ): AsyncData -type UseApiDataOptions = AsyncDataOptions & Pick< - ComputedOptions>, - | 'onRequest' - | 'onRequestError' - | 'onResponse' - | 'onResponseError' - | 'query' - | 'headers' - | 'method' -> & { - body?: string | Record | FormData | null - /** - * Skip the Nuxt server proxy and fetch directly from the API. - * Requires `allowClient` to be enabled in the module options as well. - * @default false - */ - client?: boolean - /** - * Cache the response for the same request - * @default true - */ - cache?: boolean -} +type UseApiDataOptions = + Omit, 'watch'> + & Pick< + ComputedOptions>, + | 'onRequest' + | 'onRequestError' + | 'onResponse' + | 'onResponseError' + | 'query' + | 'headers' + | 'method' + > + & { + body?: MaybeRef | FormData | null | undefined> + /** + * Skip the Nuxt server proxy and fetch directly from the API. + * Requires `allowClient` to be enabled in the module options as well. + * @default false + */ + client?: boolean + /** + * Cache the response for the same request + * @default true + */ + cache?: boolean + /** + * 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`. + */ + watch?: (WatchSource | object)[] | false + } ``` ## Return Values diff --git a/src/runtime/composables/useApiData.ts b/src/runtime/composables/useApiData.ts index 32a7236..71d073c 100644 --- a/src/runtime/composables/useApiData.ts +++ b/src/runtime/composables/useApiData.ts @@ -2,6 +2,7 @@ import { computed, reactive } from 'vue' import { hash } from 'ohash' import type { FetchError } from 'ofetch' import type { NitroFetchOptions } from 'nitropack' +import type { WatchSource } from 'vue' import type { AsyncData, AsyncDataOptions } from 'nuxt/app' import type { ModuleOptions } from '../../module' import { headersToObject, serializeMaybeEncodedBody, toValue } from '../utils' @@ -17,29 +18,37 @@ type ComputedOptions> = { : MaybeRef; } -export type UseApiDataOptions = AsyncDataOptions & Pick< - ComputedOptions>, - | 'onRequest' - | 'onRequestError' - | 'onResponse' - | 'onResponseError' - | 'query' - | 'headers' - | 'method' -> & { - body?: MaybeRef | FormData | null | undefined> - /** - * Skip the Nuxt server proxy and fetch directly from the API. - * Requires `allowClient` to be enabled in the module options as well. - * @default false - */ - client?: boolean - /** - * Cache the response for the same request - * @default true - */ - cache?: boolean -} +export type UseApiDataOptions = + Omit, 'watch'> + & Pick< + ComputedOptions>, + | 'onRequest' + | 'onRequestError' + | 'onResponse' + | 'onResponseError' + | 'query' + | 'headers' + | 'method' + > + & { + body?: MaybeRef | FormData | null | undefined> + /** + * Skip the Nuxt server proxy and fetch directly from the API. + * Requires `allowClient` to be enabled in the module options as well. + * @default false + */ + client?: boolean + /** + * Cache the response for the same request + * @default true + */ + cache?: boolean + /** + * 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`. + */ + watch?: (WatchSource | object)[] | false + } export type UseApiData = ( path: MaybeRefOrGetter, @@ -95,10 +104,12 @@ export function _useApiData( default: defaultFn, transform, pick, - watch: [ - _endpointFetchOptions, - ...(watch || []), - ], + watch: watch === false + ? [] + : [ + _endpointFetchOptions, + ...(watch || []), + ], immediate, }