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

docs: add note about fetching data on initial load (#7120)

Browse Source
This commit is contained in:
Daniel Roe 2022-09-03 12:02:21 +01:00 committed by GitHub
parent 664e5702af
commit 0f1a746825
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/3.api/1.composables/use-async-data.md
View File

@ -38,7 +38,7 @@ type AsyncData<DataT> = {
* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you. * **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
* **handler**: 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 client-side 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 the server (defaults to `true`) * _server_: whether to fetch the data on the server (defaults to `true`)
* _transform_: a function that can be used to alter `handler` function result after resolving * _transform_: a function that can be used to alter `handler` function result after resolving
@ -55,7 +55,11 @@ Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the rout
* **refresh**: a function that can be used to refresh the data returned by the `handler` function * **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 * **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. By default, Nuxt waits until a `refresh` is finished before it can be executed again.
::alert{type=warning}
If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await `useAsyncData` on the client side, `data` will remain `null` within `<script setup>`.
::
## Example ## Example

7
docs/content/3.api/1.composables/use-fetch.md
View File

@ -45,7 +45,6 @@ type AsyncData<DataT> = {
* `baseURL`: Base URL for the request. * `baseURL`: Base URL for the request.
* **Options (from `useAsyncData`)**: * **Options (from `useAsyncData`)**:
* `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be generated based on the static code location where `useAyncData` is used. * `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests, if not provided, it will be generated based on the static code location where `useAyncData` is used.
* `lazy`: Whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`).
* `server`: Whether to fetch the data on the server (defaults to `true`). * `server`: Whether to fetch the data on the server (defaults to `true`).
* `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.
* `pick`: Only pick specified keys in this array from the `handler` function result. * `pick`: Only pick specified keys in this array from the `handler` function result.
@ -64,7 +63,11 @@ If you provide a function or ref as the `url` parameter, or if you provide funct
* **refresh**: a function that can be used to refresh the data returned by the `handler` function. * **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. * **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. By default, Nuxt waits until a `refresh` is finished before it can be executed again.
::alert{type=warning}
If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await `useFetch` on client-side, `data` will remain null within `<script setup>`.
::
## Example ## Example