mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-28 16:42:04 +00:00
docs: remove deprecated pending
variable from data fetching docs (#28011)
This commit is contained in:
parent
ef35ff27df
commit
fe3dbfd655
@ -134,7 +134,7 @@ The `useAsyncData` composable is a great way to wrap and wait for multiple `$fet
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { data: discounts, pending } = await useAsyncData('cart-discount', async () => {
|
const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
|
||||||
const [coupons, offers] = await Promise.all([
|
const [coupons, offers] = await Promise.all([
|
||||||
$fetch('/cart/coupons'),
|
$fetch('/cart/coupons'),
|
||||||
$fetch('/cart/offers')
|
$fetch('/cart/offers')
|
||||||
@ -156,14 +156,13 @@ Read more about `useAsyncData`.
|
|||||||
`useFetch` and `useAsyncData` have the same return values listed below.
|
`useFetch` and `useAsyncData` have the same return values listed below.
|
||||||
|
|
||||||
- `data`: the result of the asynchronous function that is passed in.
|
- `data`: the result of the asynchronous function that is passed in.
|
||||||
- `pending`: a boolean indicating whether the data is still being fetched.
|
|
||||||
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
||||||
- `clear`: a function that can be used to set `data` to undefined, set `error` to `null`, set `pending` to `false`, set `status` to `idle`, and mark any currently pending requests as cancelled.
|
- `clear`: a function that can be used to set `data` to undefined, set `error` to `null`, set `status` to `idle`, and mark any currently pending requests as cancelled.
|
||||||
- `error`: an error object if the data fetching failed.
|
- `error`: an error object if the data fetching failed.
|
||||||
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
||||||
|
|
||||||
::note
|
::note
|
||||||
`data`, `pending`, `error` and `status` are Vue refs accessible with `.value` in `<script setup>`
|
`data`, `error` and `status` are Vue refs accessible with `.value` in `<script setup>`
|
||||||
::
|
::
|
||||||
|
|
||||||
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
||||||
@ -178,18 +177,18 @@ If you have not fetched data on the server (for example, with `server: false`),
|
|||||||
|
|
||||||
### Lazy
|
### Lazy
|
||||||
|
|
||||||
By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `pending` value.
|
By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `status` value.
|
||||||
|
|
||||||
```vue twoslash [app.vue]
|
```vue twoslash [app.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { pending, data: posts } = useFetch('/api/posts', {
|
const { status, data: posts } = useFetch('/api/posts', {
|
||||||
lazy: true
|
lazy: true
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- you will need to handle a loading state -->
|
<!-- you will need to handle a loading state -->
|
||||||
<div v-if="pending">
|
<div v-if="status === 'pending'">
|
||||||
Loading ...
|
Loading ...
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
@ -204,7 +203,7 @@ You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch)
|
|||||||
|
|
||||||
```vue twoslash
|
```vue twoslash
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { pending, data: posts } = useLazyFetch('/api/posts')
|
const { status, data: posts } = useLazyFetch('/api/posts')
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -227,7 +226,7 @@ Combined with the `lazy` option, this can be useful for data that is not needed
|
|||||||
const articles = await useFetch('/api/article')
|
const articles = await useFetch('/api/article')
|
||||||
|
|
||||||
/* This call will only be performed on the client */
|
/* This call will only be performed on the client */
|
||||||
const { pending, data: comments } = useFetch('/api/comments', {
|
const { status, data: comments } = useFetch('/api/comments', {
|
||||||
lazy: true,
|
lazy: true,
|
||||||
server: false
|
server: false
|
||||||
})
|
})
|
||||||
@ -355,7 +354,7 @@ Sometimes you may need to compute an URL from reactive values, and refresh the d
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const id = ref(null)
|
const id = ref(null)
|
||||||
|
|
||||||
const { data, pending } = useLazyFetch('/api/user', {
|
const { data, status } = useLazyFetch('/api/user', {
|
||||||
query: {
|
query: {
|
||||||
user_id: id
|
user_id: id
|
||||||
}
|
}
|
||||||
@ -371,9 +370,11 @@ Every time a dependency changes, the data will be fetched using the newly constr
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const id = ref(null)
|
const id = ref(null)
|
||||||
|
|
||||||
const { data, pending, status } = useLazyFetch(() => `/api/users/${id.value}`, {
|
const { data, status } = useLazyFetch(() => `/api/users/${id.value}`, {
|
||||||
immediate: false
|
immediate: false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const pending = computed(() => status.value === 'pending');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -406,7 +407,7 @@ With that, you will need both the `status` to handle the fetch lifecycle, and `e
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { data, error, execute, pending, status } = await useLazyFetch('/api/comments', {
|
const { data, error, execute, status } = await useLazyFetch('/api/comments', {
|
||||||
immediate: false
|
immediate: false
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -416,7 +417,7 @@ const { data, error, execute, pending, status } = await useLazyFetch('/api/comme
|
|||||||
<button @click="execute">Get data</button>
|
<button @click="execute">Get data</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="pending">
|
<div v-else-if="status === 'pending'">
|
||||||
Loading comments...
|
Loading comments...
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
|
|||||||
```vue twoslash
|
```vue twoslash
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
/* useAsyncData() and $fetch() are auto-imported */
|
/* useAsyncData() and $fetch() are auto-imported */
|
||||||
const { data, refresh, pending } = await useFetch('/api/hello')
|
const { data, refresh, status } = await useFetch('/api/hello')
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
|
|||||||
|
|
||||||
```vue [pages/index.vue]
|
```vue [pages/index.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { data, pending, error, refresh, clear } = await useAsyncData(
|
const { data, status, error, refresh, clear } = await useAsyncData(
|
||||||
'mountains',
|
'mountains',
|
||||||
() => $fetch('https://api.nuxtjs.dev/mountains')
|
() => $fetch('https://api.nuxtjs.dev/mountains')
|
||||||
)
|
)
|
||||||
@ -30,7 +30,7 @@ If you're using a custom useAsyncData wrapper, do not await it in the composable
|
|||||||
::
|
::
|
||||||
|
|
||||||
::note
|
::note
|
||||||
`data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
|
`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
|
||||||
::
|
::
|
||||||
|
|
||||||
### Watch Params
|
### Watch Params
|
||||||
@ -92,11 +92,10 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
|
|||||||
## Return Values
|
## Return Values
|
||||||
|
|
||||||
- `data`: the result of the asynchronous function that is passed in.
|
- `data`: the result of the asynchronous function that is passed in.
|
||||||
- `pending`: a boolean indicating whether the data is still being fetched.
|
|
||||||
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
- `refresh`/`execute`: 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.
|
||||||
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
||||||
- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `pending` to `false`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
|
- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
|
||||||
|
|
||||||
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
||||||
|
|
||||||
@ -132,7 +131,6 @@ type AsyncDataOptions<DataT> = {
|
|||||||
|
|
||||||
type AsyncData<DataT, ErrorT> = {
|
type AsyncData<DataT, ErrorT> = {
|
||||||
data: Ref<DataT | null>
|
data: Ref<DataT | null>
|
||||||
pending: Ref<boolean>
|
|
||||||
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||||
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||||
clear: () => void
|
clear: () => void
|
||||||
|
@ -19,7 +19,7 @@ It automatically generates a key based on URL and fetch options, provides type h
|
|||||||
|
|
||||||
```vue [pages/modules.vue]
|
```vue [pages/modules.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { data, pending, error, refresh, clear } = await useFetch('/api/modules', {
|
const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
|
||||||
pick: ['title']
|
pick: ['title']
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -30,14 +30,14 @@ If you're using a custom useFetch wrapper, do not await it in the composable, as
|
|||||||
::
|
::
|
||||||
|
|
||||||
::note
|
::note
|
||||||
`data`, `pending`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions..
|
`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions..
|
||||||
::
|
::
|
||||||
|
|
||||||
Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ofetch](https://github.com/unjs/ofetch) and is using [unjs/ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.
|
Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ofetch](https://github.com/unjs/ofetch) and is using [unjs/ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
const param1 = ref('value1')
|
const param1 = ref('value1')
|
||||||
const { data, pending, error, refresh } = await useFetch('/api/modules', {
|
const { data, status, error, refresh } = await useFetch('/api/modules', {
|
||||||
query: { param1, param2: 'value2' }
|
query: { param1, param2: 'value2' }
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@ -47,7 +47,7 @@ The above example results in `https://api.nuxt.com/modules?param1=value1¶m2=
|
|||||||
You can also use [interceptors](https://github.com/unjs/ofetch#%EF%B8%8F-interceptors):
|
You can also use [interceptors](https://github.com/unjs/ofetch#%EF%B8%8F-interceptors):
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
const { data, pending, error, refresh, clear } = await useFetch('/api/auth/login', {
|
const { data, status, error, refresh, clear } = await useFetch('/api/auth/login', {
|
||||||
onRequest({ request, options }) {
|
onRequest({ request, options }) {
|
||||||
// Set the request headers
|
// Set the request headers
|
||||||
options.headers = options.headers || {}
|
options.headers = options.headers || {}
|
||||||
@ -128,11 +128,10 @@ Learn how to use `transform` and `getCachedData` to avoid superfluous calls to a
|
|||||||
## Return Values
|
## Return Values
|
||||||
|
|
||||||
- `data`: the result of the asynchronous function that is passed in.
|
- `data`: the result of the asynchronous function that is passed in.
|
||||||
- `pending`: a boolean indicating whether the data is still being fetched.
|
|
||||||
- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
|
- `refresh`/`execute`: 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.
|
||||||
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
- `status`: a string indicating the status of the data request (`"idle"`, `"pending"`, `"success"`, `"error"`).
|
||||||
- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `pending` to `false`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
|
- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
|
||||||
|
|
||||||
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
||||||
|
|
||||||
@ -170,7 +169,6 @@ type UseFetchOptions<DataT> = {
|
|||||||
|
|
||||||
type AsyncData<DataT, ErrorT> = {
|
type AsyncData<DataT, ErrorT> = {
|
||||||
data: Ref<DataT | null>
|
data: Ref<DataT | null>
|
||||||
pending: Ref<boolean>
|
|
||||||
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||||
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
||||||
clear: () => void
|
clear: () => void
|
||||||
|
@ -23,9 +23,9 @@ By default, [`useAsyncData`](/docs/api/composables/use-async-data) blocks naviga
|
|||||||
```vue [pages/index.vue]
|
```vue [pages/index.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
/* Navigation will occur before fetching is complete.
|
/* Navigation will occur before fetching is complete.
|
||||||
Handle pending and error states directly within your component's template
|
Handle 'pending' and 'error' states directly within your component's template
|
||||||
*/
|
*/
|
||||||
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||||
|
|
||||||
watch(count, (newCount) => {
|
watch(count, (newCount) => {
|
||||||
// Because count might start out null, you won't have access
|
// Because count might start out null, you won't have access
|
||||||
@ -35,7 +35,7 @@ watch(count, (newCount) => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
{{ pending ? 'Loading' : count }}
|
{{ status === 'pending' ? 'Loading' : count }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
@ -23,9 +23,9 @@ By default, [`useFetch`](/docs/api/composables/use-fetch) blocks navigation unti
|
|||||||
```vue [pages/index.vue]
|
```vue [pages/index.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
/* Navigation will occur before fetching is complete.
|
/* Navigation will occur before fetching is complete.
|
||||||
Handle pending and error states directly within your component's template
|
* Handle 'pending' and 'error' states directly within your component's template
|
||||||
*/
|
*/
|
||||||
const { pending, data: posts } = await useLazyFetch('/api/posts')
|
const { status, data: posts } = await useLazyFetch('/api/posts')
|
||||||
watch(posts, (newPosts) => {
|
watch(posts, (newPosts) => {
|
||||||
// Because posts might start out null, you won't have access
|
// Because posts might start 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.
|
||||||
@ -33,7 +33,7 @@ watch(posts, (newPosts) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="pending">
|
<div v-if="status === 'pending'">
|
||||||
Loading ...
|
Loading ...
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
|
@ -58,13 +58,13 @@ This example below refreshes only data where the key matches to `count`.
|
|||||||
|
|
||||||
```vue [pages/some-page.vue]
|
```vue [pages/some-page.vue]
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
|
||||||
const refresh = () => refreshNuxtData('count')
|
const refresh = () => refreshNuxtData('count')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
{{ pending ? 'Loading' : count }}
|
{{ status === 'pending' ? 'Loading' : count }}
|
||||||
</div>
|
</div>
|
||||||
<button @click="refresh">Refresh</button>
|
<button @click="refresh">Refresh</button>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user