auto-imports

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

useNuxtData composable signature

useNuxtData is a composable with the signature: export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }. It takes a key parameter (string) that identifies the cached data, and returns an object with a data property that is a reactive Ref to the cached data or undefined if no cached data exists.

useNuxtData accesses cached data from multiple composables

useNuxtData gives access to the current cached value of useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch with an explicitly provided key.

useNuxtData requires explicit key in original fetch

To use useNuxtData, the data-fetching composable (useFetch, useAsyncData, etc.) must have been called with an explicitly provided key. You can then retrieve the cached data by calling useNuxtData with the same key.

useNuxtData data reactivity

The data property returned by useNuxtData is a reactive Ref that automatically updates if the cached data changes, allowing seamless reactivity in components.

useNuxtData use case: cascading data updates

useNuxtData is useful for accessing previously fetched data from parent routes or other components to use as default values or placeholders, enabling cascading data updates where nested routes can reference parent route data.

useNuxtData example with default value from cache

Example showing useNuxtData usage: In a child route component, call const { data: posts } = useNuxtData('posts') to access cached data from a parent route's useFetch call, then use that data as a default value in useLazyFetch: const { data } = useLazyFetch(`/api/posts/${route.params.id}`, { key: `post-${route.params.id}`, default () { return posts.value.find(post => post.id === route.params.id) } }).

Optimistic Updates pattern with useNuxtData

Optimistic Updates is a technique where the UI is updated immediately assuming a server operation will succeed, then rolled back if it fails. With useNuxtData, store the previous cached value before updating, modify the cached data optimistically, restore it onResponseError if needed, and call refreshNuxtData to invalidate and refetch in the background onResponse if the request succeeds.

Optimistic Updates example code

Example of Optimistic Updates with useNuxtData: ```vue const newTodo = ref('') let previousTodos = [] const { data: todos } = useNuxtData('todos') async function addTodo () { await $fetch('/api/addTodo', { method: 'post', body: { todo: newTodo.value }, onRequest () { previousTodos = todos.value todos.value = [...todos.value, newTodo.value] }, onResponseError () { todos.value = previousTodos }, async onResponse () { await refreshNuxtData('todos') }, }) } ```

Give your agent this brain