Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-07 17:32:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(docs): improve useAsyncData docs (#3333)

Browse Source
This commit is contained in:
Rodrigo Mesquita 2022-02-21 08:24:57 -03:00 committed by GitHub
parent f1b84ac14a
commit 070de5ba45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/content/3.docs/1.usage/1.data-fetching.md
View File

@ -12,7 +12,7 @@ Within your pages, components and plugins you can use `useAsyncData` to get acce
### Usage ### Usage
```js ```ts
const { const {
data: Ref<DataT>, data: Ref<DataT>,
pending: Ref<boolean>, pending: Ref<boolean>,
@ -20,32 +20,36 @@ const {
error?: any error?: any
} = useAsyncData( } = useAsyncData(
key: string, key: string,
fn: () => Object, handler: (ctx?: NuxtApp) => Promise<Object>,
options?: { lazy: boolean, server: boolean } options?: { lazy: boolean, server: boolean }
) )
``` ```
### Params
* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests * **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**: * **options**:
* _lazy_: whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`) * _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 * _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`) * _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 * _transform_: a function that can be used to alter `handler` function result after resolving
* _pick_: Only pick specified keys in this array from fn result * _pick_: only pick specified keys in this array from `handler` function 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
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. 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.
### 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 ### Example
```js [server/api/count.ts] ```ts [server/api/count.ts]
let counter = 0 let counter = 0
export default () => { export default () => {
counter++ counter++