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(api): document lazy wrappers for data fetching (#4333)

Browse Source
This commit is contained in:
Clément Ollivier 2022-04-14 12:45:53 +02:00 committed by GitHub
parent 41663f6264
commit f04704890d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,14 @@
# `useLazyAsyncData` # `useLazyAsyncData`
This composable behaves identically to [useAsyncData](/api/composables/use-async-data) with the `lazy: true` option set. ## Description
Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function). By default, [useAsyncData](/api/composables/use-async-data) blocks navigation until its async handler is resolved.
::ReadMore{link="/api/composables/use-async-data"} `useLazyAsyncData` provides a wrapper around `useAsyncData` that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
::
> `useLazyAsyncData` has the same signature as `useAsyncData`.
:ReadMore{link="/api/composables/use-async-data"}
## Example ## Example
@ -17,7 +20,11 @@ Otherwise, this function does not block navigation. That means you will need to
</template> </template>
<script setup> <script setup>
/* Navigation will occur before fetching is complete.
Handle pending and error state directly within your component's template
*/
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count')) const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => { watch(count, (newCount) => {
// Because count starts out null, you won't have access // Because count starts out null, you won't have access
// to its contents immediately, but you can watch it. // to its contents immediately, but you can watch it.
@ -25,5 +32,4 @@ watch(count, (newCount) => {
</script> </script>
``` ```
::ReadMore{link="/guide/features/data-fetching"} :ReadMore{link="/guide/features/data-fetching#uselazyasyncdata"}
::

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

@ -1,17 +1,19 @@
# `useLazyFetch` # `useLazyFetch`
This composable behaves identically to [useFetch](/api/composables/use-fetch) with the `lazy: true` option set. ## Description
Otherwise, this function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function). By default, [useFetch](/api/composables/use-fetch) blocks navigation until its async handler is resolved.
::ReadMore{link="/api/composables/use-fetch"} `useLazyFetch` provides a wrapper around `useFetch` that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
::
> `useLazyFetch` has the same signature as `useFetch`.
:ReadMore{link="/api/composables/use-fetch"}
## Example ## Example
```vue ```vue
<template> <template>
<!-- you'll need to handle a loading state -->
<div v-if="pending"> <div v-if="pending">
Loading ... Loading ...
</div> </div>
@ -23,6 +25,9 @@ Otherwise, this function does not block navigation. That means you will need to
</template> </template>
<script setup> <script setup>
/* Navigation will occur before fetching is complete.
Handle pending and error state directly within your component's template
*/
const { pending, data: posts } = useLazyFetch('/api/posts') const { pending, data: posts } = useLazyFetch('/api/posts')
watch(posts, (newPosts) => { watch(posts, (newPosts) => {
// Because posts starts out null, you won't have access // Because posts starts out null, you won't have access
@ -31,5 +36,4 @@ watch(posts, (newPosts) => {
</script> </script>
``` ```
::ReadMore{link="/guide/features/data-fetching"} :ReadMore{link="/guide/features/data-fetching#uselazyfetch"}
::