new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · API · all subjects

composables/use-lazy-fetch

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useLazyFetch composable signature

useLazyFetch has the signature: export function useLazyFetch<ResT, ErrorT = NuxtError<unknown>, DataT = ResT>(url: string | Request | Ref<string | Request> | (() => string | Request), options?: UseFetchOptions<ResT, DataT>): AsyncData<DataT, ErrorT> & Promise<AsyncData<DataT, ErrorT>>. It is equivalent to useFetch with lazy: true option set.

useLazyFetch allows navigation before fetch completes

useLazyFetch triggers navigation immediately before the handler is resolved by setting the lazy option to true. Unlike useFetch which blocks navigation until its async handler is resolved, useLazyFetch allows navigation to proceed immediately with data being fetched in the background.

useLazyFetch parameters

useLazyFetch accepts the same parameters as useFetch: url (string | Request | Ref<string | Request> | () => string | Request) - the URL or request to fetch, and options (object) - same as useFetch options with lazy automatically set to true.

useLazyFetch return values

useLazyFetch returns an AsyncData object with the following properties: data (Ref<DataT | undefined>) - the result of the asynchronous fetch; refresh ((opts?: AsyncDataExecuteOptions) => Promise<void>) - function to manually refresh the data; execute ((opts?: AsyncDataExecuteOptions) => Promise<void>) - alias for refresh; error (Ref<ErrorT | undefined>) - error object if data fetching failed; status (Ref<'idle' | 'pending' | 'success' | 'error'>) - status of the data request; pending (Ref<boolean>) - true while a request is in flight; clear (() => void) - resets data to undefined, error to undefined, sets status to idle, and cancels any pending requests.

useLazyFetch requires checking status before using data

When using useLazyFetch, you must check status === 'pending' and status === 'error' in your component's template before using the result, especially during client-side navigation. Awaiting useLazyFetch initializes the call but does not wait for the data.

useLazyFetch is a reserved compiler-transformed function

useLazyFetch is a reserved function name transformed by the compiler, so you should not name your own function useLazyFetch.

useLazyFetch example with loading state handling

Example of using useLazyFetch with loading and error state handling: ```vue <script setup lang="ts"> const { status, data: posts } = await useLazyFetch('/api/posts') watch(posts, (newPosts) => { // Because posts might start out null, you won't have access // to its contents immediately, but you can watch it. }) </script> <template> <div v-if="status === 'pending'"> Loading ... </div> <div v-else-if="status === 'error'"> Error loading posts </div> <div v-else> <div v-for="post in posts"> <!-- do something --> </div> </div> </template> ```

Give your agent this brain