composables/usenuxdata

9 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 accepts a key parameter which is a string representing the unique key that identifies the cached data, and returns an object containing a data property which is a reactive reference (Ref) to the cached data associated with that key.

useNuxtData purpose and compatible composables

useNuxtData gives access to the current cached value of useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch. It retrieves cached data by providing the key that was used during the original data fetch.

useNuxtData parameter: key

The key parameter is a required string that identifies the cached data. This key must match the one used during the original data fetch call to retrieve the corresponding cached data.

useNuxtData return value: data

The data return value is a reactive reference (Ref) to the cached data associated with the provided key. If no cached data exists for that key, the value will be undefined. The Ref automatically updates if the cached data changes, providing seamless reactivity in components.

useNuxtData requires explicitly provided key

To use useNuxtData, ensure that the data-fetching composable (useFetch, useAsyncData, etc.) has been called with an explicitly provided key parameter.

useNuxtData use case: cached data as placeholder

A common use case is accessing cached data as a placeholder while fresh data is being fetched from the server. For example, in a parent route, data can be fetched with useFetch('/api/posts', { key: 'posts' }), and in a child route, useNuxtData('posts') can retrieve that cached data to use as a default value.

useNuxtData example: accessing cached data from parent route

In app/pages/posts.vue: const { data } = await useFetch('/api/posts', { key: 'posts' }). In app/pages/posts/[id].vue: const { data: posts } = useNuxtData('posts'); then use posts.value to access the cached data from the parent route.

useNuxtData for optimistic updates pattern

useNuxtData enables implementing Optimistic Updates, a technique where the UI is updated immediately before a server operation completes, assuming success. If the operation fails, the UI is rolled back to its previous state. This is achieved by storing the previously cached value before updating it optimistically, then restoring it if an error occurs.

useNuxtData optimistic update example with useAsyncData

In todos.vue, cache todos with: const { data } = await useAsyncData('todos', (_nuxtApp, { signal }) => $fetch('/api/todos', { signal })). In NewTodo.vue component, use: const { data: todos } = useNuxtData('todos'). On request, store previousTodos = todos.value, then optimistically update todos.value with new data. On error, restore todos.value = previousTodos. On success, call refreshNuxtData('todos') to invalidate the cache.

Give your agent this brain