Nuxt•2y ago

Optimistic UI with useAsyncData?

Hi, In the docs for optimistic UI https://nuxt.com/docs/api/composables/use-nuxt-data#optimistic-updates they use useFetch as an example. Is this also possible with useAsyncData? I tried setting the onRequest and onRequestError but this is not available on useAsyncData. Thanks

Nuxt

useNuxtData · Nuxt Composables

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

1 Reply

Alireza•2y ago

onRequest etc are called interceptors. The come from the ofetch package which is same as the $fetch It should be possible to do it like this in theory

const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains', {  
      async onRequest({ request, options }) {...} 
   })
)

const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains', {  
      async onRequest({ request, options }) {...} 
   })
)

Gaming

Programming

Optimistic UI with useAsyncData?