Not possible to be used with useAsyncData?

[marssantoso]

I use the exact same config as in the README, and attempted to fetch the API from useAsyncData using $fetch like so:

const { data } = useAsyncData('todos', () => $fetch(`${baseUrl}/api/todos`), { transform: ({ data }) => data })

But the page is just stuck at pending. Using it with useFetch seems to be working fine, though. It's particularly weird since the Nuxt's doc mentioned that useFetch is just a wrapper around useAsyncData and $fetch.

It also seems to be working fine when $fetch is used in CSR (i.e., onMounted).

[thunder-al]

same problem. i did some research and realized that this is the problem comes from nitro/h3 server or nuxt internal request handling. it somehow just stuck when i tried to proxy any request. i tried http-proxy http-proxy-middleware @refactorjs/http-proxy @nuxtjs-alt/proxy nuxt-proxy and even pure realization. all same: it stuck on await $fetch('/api/qwe') but works well with await $fetch('/api/qwe', {server: false}) (because this request invokes in browser), also if you open http://localhost:3000/api/qwe it will proxy as it should. so, again, its only problem around SSR internal url/request handling

[thunder-al]

its possibly somewhere around creating and using h3App.nodeHandler and creating theirs own server side fetch which uses localCall to mimic regular http request to h3 server https://github.com/unjs/nitro/blob/main/src/runtime/app.ts#L60-L61

[wobsoriano]

useAsyncData works perfectly fine. Check the playground.