Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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
```js
```ts
const {
data: Ref<DataT>,
pending: Ref<boolean>,
@ -20,32 +20,36 @@ const {
error?: any
} = useAsyncData(
key: string,
fn: () => Object,
handler: (ctx?: NuxtApp) => Promise<Object>,
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 `<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
```js [server/api/count.ts]
```ts [server/api/count.ts]
let counter = 0
export default () => {
counter++