null response on load of the nested child when using useLazyFetch on bridge

Discussed in https://github.com/nuxt/framework/discussions/3083

<div type='discussions-op-text'>

^{Originally posted by csechuan February 7, 2022}

Reproduction

https://github-rxxzhp-cpxf9c–3000.local.webcontainer.io/

Steps

1. Open your console
2. Click “Go cinema”
3. Click “Watch movie”

// console output
movie env client res {"data":{"value":null},"pending":{"value":true},"error":{"value":null}}

1. Click “Back”
2. Click “Go cinema” again

// console output
movie env client res {"data":{"value":{A_LOT_OF_DATA_HERE}},"pending":{"value":true},"error":{"value":null}}

// check the network tab for movie. you should see the API response fine.

1. Repeating steps 4-5 will have the same result

Description of the bug

Fetch response does not have data on first try. Subsequently it prints some data.

Additional context

Besides, i found another bug during debugging this issue. The pending flag is always true when useLazyFetch runs on client. I may not use the function correctly.

<script setup>
// since vue2 on nuxt bridge cant use top-level await
useLazyFetch('URL_HERE').then(res => console.log(res))
</script>

</div>

[danielroe]

The data from useLazyFetch isn’t meant to be used within the setup function (that’s why it’s lazy). Instead it returns a reactive ref that gets filled in later. So you handle it like this: https://v3.nuxtjs.org/docs/usage/data-fetching#example-3

[csechuan]

sorry. terrible mistake. didnt notice that. try this

https://stackblitz.com/edit/github-rxxzhp-cpxf9c