// 'posts' 키를 사용하여 나중에 동일한 데이터에 액세스할 수 있습니다.
const { data } = await useFetch('/api/posts', { key: 'posts' })

// posts.vue (상위 경로)에서 useFetch의 캐시된 값에 액세스합니다.
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)
  }
})

// 'todos' 키를 사용하여 나중에 동일한 데이터에 액세스할 수 있습니다.
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))

const newTodo = ref('')
let previousTodos = []

// todos.vue에서 useAsyncData의 캐시된 값에 액세스합니다.
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  return $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value
    },
    onRequest () {
      // 페칭 실패 시 복원할 수 있도록 이전에 캐시된 값을 저장합니다.
      previousTodos = todos.value

      // 낙관적으로 todos를 업데이트합니다.
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // 요청이 실패하면 데이터를 롤백합니다.
      todos.value = previousTodos
    },
    async onResponse () {
      // 요청이 성공하면 백그라운드에서 todos를 무효화합니다.
      await refreshNuxtData('todos')
    }
  })
}