diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/3.docs/1.usage/1.data-fetching.md index 55b6666c72..c46c91a8d6 100644 --- a/docs/content/3.docs/1.usage/1.data-fetching.md +++ b/docs/content/3.docs/1.usage/1.data-fetching.md @@ -12,7 +12,7 @@ Within your pages, components and plugins you can use `useAsyncData` to get acce ### Usage -```js +```ts const { data: Ref, pending: Ref, @@ -20,32 +20,36 @@ const { error?: any } = useAsyncData( key: string, - fn: () => Object, + handler: (ctx?: NuxtApp) => Promise, options?: { lazy: boolean, server: boolean } ) ``` +### Params + * **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests -* **fn** an asynchronous function that returns a value. +* **handler**: an asynchronous function that returns a value * **options**: * _lazy_: whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`) * _default_: a factory function to set the default value of the data, before the async function resolves - particularly useful with the `lazy: true` option * _server_: whether to fetch the data on server-side (defaults to `true`) - * _transform_: A function that can be used to alter fn result after resolving - * _pick_: Only pick specified keys in this array from fn result - -`useAsyncData` returns an object with the following properties: - -* **data**: the result of the asynchronous function that is passed in -* **pending**: a boolean indicating whether the data is still being fetched -* **refresh**: a function that can be used to force a refresh of the data -* **error**: an error object if the data fetching failed + * _transform_: a function that can be used to alter `handler` function result after resolving + * _pick_: only pick specified keys in this array from `handler` function result Under the hood, `lazy: false` uses `` 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. +### Return values + +* **data**: the result of the asynchronous function that is passed in +* **pending**: a boolean indicating whether the data is still being fetched +* **refresh**: a function that can be used to refresh the data returned by the `handler` function +* **error**: an error object if the data fetching failed + +By default, Nuxt waits until a `refresh` is finished before it can be executed again. Passing `true` as parameter skips that wait. + ### Example -```js [server/api/count.ts] +```ts [server/api/count.ts] let counter = 0 export default () => { counter++