@nuxt/docs-nightly 4.0.0-29189798.d2938de6 → 4.0.0-29190952.6cf4f100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -159,7 +159,7 @@ const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { imm
|
|
|
159
159
|
By default, Nuxt waits until a `refresh` is finished before it can be executed again.
|
|
160
160
|
|
|
161
161
|
::note
|
|
162
|
-
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`](/docs/api/composables/use-async-data) on the client side, `data` will remain `
|
|
162
|
+
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`](/docs/api/composables/use-async-data) on the client side, `data` will remain `undefined` within `<script setup>`.
|
|
163
163
|
::
|
|
164
164
|
|
|
165
165
|
## Type
|
|
@@ -170,7 +170,7 @@ function useAsyncData<DataT, DataE>(
|
|
|
170
170
|
options?: AsyncDataOptions<DataT>
|
|
171
171
|
): AsyncData<DataT, DataE>
|
|
172
172
|
function useAsyncData<DataT, DataE>(
|
|
173
|
-
key:
|
|
173
|
+
key: MaybeRefOrGetter<string>,
|
|
174
174
|
handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
|
|
175
175
|
options?: AsyncDataOptions<DataT>
|
|
176
176
|
): Promise<AsyncData<DataT, DataE>>
|
|
@@ -184,7 +184,7 @@ type AsyncDataOptions<DataT> = {
|
|
|
184
184
|
default?: () => DataT | Ref<DataT> | null
|
|
185
185
|
transform?: (input: DataT) => DataT | Promise<DataT>
|
|
186
186
|
pick?: string[]
|
|
187
|
-
watch?:
|
|
187
|
+
watch?: MultiWatchSources | false
|
|
188
188
|
getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
|
|
189
189
|
}
|
|
190
190
|
|
|
@@ -194,11 +194,11 @@ type AsyncDataRequestContext = {
|
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
type AsyncData<DataT, ErrorT> = {
|
|
197
|
-
data: Ref<DataT |
|
|
197
|
+
data: Ref<DataT | undefined>
|
|
198
198
|
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
|
199
199
|
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
|
200
200
|
clear: () => void
|
|
201
|
-
error: Ref<ErrorT |
|
|
201
|
+
error: Ref<ErrorT | undefined>
|
|
202
202
|
status: Ref<AsyncDataRequestStatus>
|
|
203
203
|
};
|
|
204
204
|
|
|
@@ -103,7 +103,7 @@ function useFetch<DataT, ErrorT>(
|
|
|
103
103
|
): Promise<AsyncData<DataT, ErrorT>>
|
|
104
104
|
|
|
105
105
|
type UseFetchOptions<DataT> = {
|
|
106
|
-
key?: string
|
|
106
|
+
key?: MaybeRefOrGetter<string>
|
|
107
107
|
method?: string
|
|
108
108
|
query?: SearchParams
|
|
109
109
|
params?: SearchParams
|
|
@@ -119,7 +119,8 @@ type UseFetchOptions<DataT> = {
|
|
|
119
119
|
default?: () => DataT
|
|
120
120
|
transform?: (input: DataT) => DataT | Promise<DataT>
|
|
121
121
|
pick?: string[]
|
|
122
|
-
|
|
122
|
+
$fetch?: typeof globalThis.$fetch
|
|
123
|
+
watch?: MultiWatchSources | false
|
|
123
124
|
}
|
|
124
125
|
|
|
125
126
|
type AsyncDataRequestContext = {
|
|
@@ -128,11 +129,11 @@ type AsyncDataRequestContext = {
|
|
|
128
129
|
}
|
|
129
130
|
|
|
130
131
|
type AsyncData<DataT, ErrorT> = {
|
|
131
|
-
data: Ref<DataT |
|
|
132
|
+
data: Ref<DataT | undefined>
|
|
132
133
|
refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
|
133
134
|
execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
|
|
134
135
|
clear: () => void
|
|
135
|
-
error: Ref<ErrorT |
|
|
136
|
+
error: Ref<ErrorT | undefined>
|
|
136
137
|
status: Ref<AsyncDataRequestStatus>
|
|
137
138
|
}
|
|
138
139
|
|
|
@@ -151,7 +152,7 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
|
|
|
151
152
|
|
|
152
153
|
| Option | Type | Default | Description |
|
|
153
154
|
| ---| --- | --- | --- |
|
|
154
|
-
| `key` | `string
|
|
155
|
+
| `key` | `MaybeRefOrGetter<string>` | auto-gen | Unique key for de-duplication. If not provided, generated from URL and options. |
|
|
155
156
|
| `method` | `string` | `'GET'` | HTTP request method. |
|
|
156
157
|
| `query` | `object` | - | Query/search params to append to the URL. Alias: `params`. Supports refs/computed. |
|
|
157
158
|
| `params` | `object` | - | Alias for `query`. |
|
|
@@ -167,10 +168,10 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
|
|
|
167
168
|
| `transform` | `(input: DataT) => DataT \| Promise<DataT>` | - | Function to transform the result after resolving. |
|
|
168
169
|
| `getCachedData`| `(key, nuxtApp, ctx) => DataT \| undefined` | - | Function to return cached data. See below for default. |
|
|
169
170
|
| `pick` | `string[]` | - | Only pick specified keys from the result. |
|
|
170
|
-
| `watch` | `
|
|
171
|
+
| `watch` | `MultiWatchSources \| false` | - | Array of reactive sources to watch and auto-refresh. `false` disables watching. |
|
|
171
172
|
| `deep` | `boolean` | `false` | Return data in a deep ref object. |
|
|
172
173
|
| `dedupe` | `'cancel' \| 'defer'` | `'cancel'` | Avoid fetching same key more than once at a time. |
|
|
173
|
-
| `$fetch` | `typeof
|
|
174
|
+
| `$fetch` | `typeof globalThis.$fetch` | - | Custom $fetch implementation. |
|
|
174
175
|
|
|
175
176
|
::note
|
|
176
177
|
All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.
|
|
@@ -189,10 +190,10 @@ This only caches data when `experimental.payloadExtraction` in `nuxt.config` is
|
|
|
189
190
|
|
|
190
191
|
| Name | Type | Description |
|
|
191
192
|
| --- | --- |--- |
|
|
192
|
-
| `data` | `Ref<DataT \|
|
|
193
|
+
| `data` | `Ref<DataT \| undefined>` | The result of the asynchronous fetch. |
|
|
193
194
|
| `refresh` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Function to manually refresh the data. By default, Nuxt waits until a `refresh` is finished before it can be executed again. |
|
|
194
195
|
| `execute` | `(opts?: AsyncDataExecuteOptions) => Promise<void>` | Alias for `refresh`. |
|
|
195
|
-
| `error` | `Ref<ErrorT \|
|
|
196
|
+
| `error` | `Ref<ErrorT \| undefined>` | Error object if the data fetching failed. |
|
|
196
197
|
| `status` | `Ref<'idle' \| 'pending' \| 'success' \| 'error'>` | Status of the data request. See below for possible values. |
|
|
197
198
|
| `clear` | `() => void` | Resets `data` to `undefined` (or the value of `options.default()` if provided), `error` to `undefined`, set `status` to `idle`, and cancels any pending requests. |
|
|
198
199
|
|