mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-19 09:55:53 +00:00
111 lines
3.8 KiB
Markdown
111 lines
3.8 KiB
Markdown
---
|
|
title: 'useNuxtData'
|
|
description: 'Access the current cached value of data fetching composables.'
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/asyncData.ts
|
|
size: xs
|
|
---
|
|
|
|
::note
|
|
`useNuxtData` gives you access to the current cached value of [`useAsyncData`](/docs/api/composables/use-async-data) , [`useLazyAsyncData`](/docs/api/composables/use-lazy-async-data), [`useFetch`](/docs/api/composables/use-fetch) and [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) with explicitly provided key.
|
|
::
|
|
|
|
## Usage
|
|
|
|
The `useNuxtData` composable is used to access the current cached value of data-fetching composables such as `useAsyncData`, `useLazyAsyncData`, `useFetch`, and `useLazyFetch`. By providing the key used during the data fetch, you can retrieve the cached data and use it as needed.
|
|
|
|
This is particularly useful for optimizing performance by reusing already-fetched data or implementing features like Optimistic Updates or cascading data updates.
|
|
|
|
To use `useNuxtData`, ensure that the data-fetching composable (`useFetch`, `useAsyncData`, etc.) has been called with an explicitly provided key.
|
|
|
|
## Params
|
|
|
|
- `key`: The unique key that identifies the cached data. This key should match the one used during the original data fetch.
|
|
|
|
## Return Values
|
|
|
|
- `data`: A reactive reference to the cached data associated with the provided key. If no cached data exists, the value will be `null`. This `Ref` automatically updates if the cached data changes, allowing seamless reactivity in your components.
|
|
|
|
## Example
|
|
|
|
The example below shows how you can use cached data as a placeholder while the most recent data is being fetched from the server.
|
|
|
|
```vue [pages/posts.vue]
|
|
<script setup lang="ts">
|
|
// We can access same data later using 'posts' key
|
|
const { data } = await useFetch('/api/posts', { key: 'posts' })
|
|
</script>
|
|
```
|
|
|
|
```vue [pages/posts/[id\\].vue]
|
|
<script setup lang="ts">
|
|
// Access to the cached value of useFetch in posts.vue (parent route)
|
|
const { data: posts } = useNuxtData('posts')
|
|
|
|
const route = useRoute()
|
|
|
|
const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
|
|
key: `post-${route.params.id}`,
|
|
default() {
|
|
// Find the individual post from the cache and set it as the default value.
|
|
return posts.value.find(post => post.id === route.params.id)
|
|
}
|
|
})
|
|
</script>
|
|
```
|
|
|
|
## Optimistic Updates
|
|
|
|
The example below shows how implementing Optimistic Updates can be achieved using useNuxtData.
|
|
|
|
Optimistic Updates is a technique where the user interface is updated immediately, assuming a server operation will succeed. If the operation eventually fails, the UI is rolled back to its previous state.
|
|
|
|
```vue [pages/todos.vue]
|
|
<script setup lang="ts">
|
|
// We can access same data later using 'todos' key
|
|
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
|
|
</script>
|
|
```
|
|
|
|
```vue [components/NewTodo.vue]
|
|
<script setup lang="ts">
|
|
const newTodo = ref('')
|
|
let previousTodos = []
|
|
|
|
// Access to the cached value of useAsyncData in todos.vue
|
|
const { data: todos } = useNuxtData('todos')
|
|
|
|
async function addTodo () {
|
|
return $fetch('/api/addTodo', {
|
|
method: 'post',
|
|
body: {
|
|
todo: newTodo.value
|
|
},
|
|
onRequest () {
|
|
// Store the previously cached value to restore if fetch fails.
|
|
previousTodos = todos.value
|
|
|
|
// Optimistically update the todos.
|
|
todos.value = [...todos.value, newTodo.value]
|
|
},
|
|
onResponseError () {
|
|
// Rollback the data if the request failed.
|
|
todos.value = previousTodos
|
|
},
|
|
async onResponse () {
|
|
// Invalidate todos in the background if the request succeeded.
|
|
await refreshNuxtData('todos')
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Type
|
|
|
|
```ts
|
|
useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }
|
|
```
|