data fetching & state

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 and return type

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

useNuxtData provides access to cached data from multiple composables

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

useNuxtData key parameter requirements

The key parameter passed to useNuxtData must match the key that was explicitly provided to the original data-fetching composable (useAsyncData, useLazyAsyncData, useFetch, or useLazyFetch). Without an explicitly provided key in the data-fetching composable, useNuxtData cannot access the cached data.

useNuxtData returns reactive reference that updates automatically

The data returned by useNuxtData is a reactive reference that automatically updates if the cached data changes, allowing seamless reactivity in components. If no cached data exists for the provided key, the value will be undefined.

useNuxtData use case for cached data as placeholder

useNuxtData can be used to access cached data from a parent route and use it as a placeholder value while fetching fresh data. This allows displaying data immediately to the user while a new request completes.

Optimistic Updates pattern with useNuxtData

Optimistic Updates is a technique where the user interface is updated immediately assuming a server operation will succeed. If the operation fails, the UI is rolled back to its previous state. This can be implemented using useNuxtData to access and temporarily modify cached data, with fallback logic to restore the previous state on error.

Example: accessing cached data from parent route with useNuxtData

// In parent route component (posts.vue): const { data } = await useFetch('/api/posts', { key: 'posts' }) // In child route component (posts/[id].vue): const { data: posts } = useNuxtData('posts') const route = useRoute() const { data } = useLazyFetch(`/api/posts/${route.params.id}`, { key: `post-${route.params.id}`, default () { return posts.value.find(post => post.id === route.params.id) }, }) This example shows accessing cached posts data from the parent route and using it as a default value for the child route fetch.

Example: Optimistic Updates implementation with useNuxtData

// In todos.vue: const { data } = await useAsyncData('todos', (_nuxtApp, { signal }) => $fetch('/api/todos', { signal })) // In NewTodo.vue component: 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') }, }) } This example demonstrates optimistic updates by immediately updating the UI, storing the previous state, rolling back on error, and refreshing data on success.

Give your agent this brain