Nuxt•3mo ago

Same useLazyAsyncData and useFetch - but useLazyAsyncData not fetch on initial render or hard refres

const {
  status,
  data: airlines,
  error,
  refresh
} = useFetch('/api/airlines/list', {
  lazy: true,
  params: queryItems,
  transform: (airlines: ListResult<Airline>) => transformer(airlines)
})

const {
  status,
  data: airlines,
  error,
  refresh
} = await useLazyAsyncData(
  'airlines',
  () =>
    $fetch('/api/airlines/list', {
      params: queryItems
    }),
  {
    transform: (airlines: ListResult<Airline>) => transformer(airlines)
  }
)

const {
  status,
  data: airlines,
  error,
  refresh
} = useFetch('/api/airlines/list', {
  lazy: true,
  params: queryItems,
  transform: (airlines: ListResult<Airline>) => transformer(airlines)
})

const {
  status,
  data: airlines,
  error,
  refresh
} = await useLazyAsyncData(
  'airlines',
  () =>
    $fetch('/api/airlines/list', {
      params: queryItems
    }),
  {
    transform: (airlines: ListResult<Airline>) => transformer(airlines)
  }
)

I have those two functions and I think they are the same? But for some reason the useLazyAsyncData doesn't seem to make the api call on initial load - it will if I navigate away and navigate back. Any thoughts on what I am doing wrong?

2 Replies

Era•3mo ago

in the development or in the production ?

avalancheOP•3mo ago

In development. I've even tried to simplify my useAsyncData request to its simplest form to see if it fetches:

const { status, data: airlines, error, refresh } = await useAsyncData('airlines', () => $fetch('/api/airlines/list'))

const { status, data: airlines, error, refresh } = await useAsyncData('airlines', () => $fetch('/api/airlines/list'))

But no dice, even if I refresh the page, but if I navigate to the page it will execute. While useFetch continues to work flawlessly both in its simplest form and the more complex options indicated above.

Gaming

Programming

Same useLazyAsyncData and useFetch - but useLazyAsyncData not fetch on initial render or hard refres