Nested "useAsyncData" fails on SSR and works on the client

[nemtsov]

Environment

------------------------------
- Operating System: `Darwin`
- Node Version:     `v14.21.1`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `npm@6.14.17`
- Builder:          `vite`
- User Config:      `modules`, `apollo`, `app`, `css`
- Runtime Modules:  `@nuxtjs/apollo@5.0.0-alpha.4`
- Build Modules:    `-`
------------------------------

Reproduction

/pages/test.vue

<template>
  <NuxtLink to="/testAsync">GO</NuxtLink>
</template>

/pages/testAsync.vue

<script setup lang="ts">
  import useTestAsync from '~~/composables/testAsync';
  const {data, error} = await useTestAsync();
</script>

<template>
  <div>DATA: "{{ data }}"</div>
  <div>ERR: "{{ error }}"</div>
</template>

/composables/testAsync.ts

export default async function useTestAsync() {
  return useAsyncData(async () => {
    const {data: a} = await useAsyncData<number>('k1', async () => Math.random());
    const {data: b} = await useAsyncData<number>('k2', async () => Math.random());

    return ((a.value || -1) + (b.value || -1));
  });
}

1. Go to /test
2. Click on the "GO" link
3. Notice that the "DATA: " is filled with a random num
4. Refresh the page (to render this page on the server)
5. Notice that the "DATA" is empty and the "ERROR" says, "ERR: "Error: nuxt instance unavailable"

Describe the bug

The code above returns an error Error: nuxt instance unavailable on the server but works as expected on dynamic navigation to this page on the client.

Additional context

No response

Logs

No response

[RozbehSharahi]

I think you should not need to nest useAsyncData. Specially not in your simplified example. If you have something real asynchronouse you'd rather do as following:

  return useAsyncData(async () => {
    const result1 = await ...;
    const result2 = await ...;

    return result1+result2;
  });

There is a real issue with useAsyncData and composable, but your example doesn't fit in the schema. Maybe if you give more input, I can help.

[misaon]

Await breaks composables flow. You can use await after await only in setup logic where compiler do some magic tweaks to work as expected.

See #12923

[nemtsov]

@RozbehSharahi & @misaon thank you for your responses. This issue came up when I attempted to write a composable which nested two of my other composables. I did so believing that was the indented purpose of composables guided by the Vue composable docs:

The cooler part about composables though, is that you can also nest them: one composable function can call one or more other composable functions. This enables us to compose complex logic using small, isolated units, similar to how we compose an entire application using components. In fact, this is why we decided to call the collection of APIs that make this pattern possible Composition API.

If I'm reading your responses (and the thread #12923) correctly, multiple useAsyncData (along with useFetch and other async composables) cannot be nested. (If so, that appears to defeat the spirit of the composition API.)

Can you please help me understand the Nuxt-recommended approach for writing sharable async composables? Is that not possible and are we limited to only having single async composible nested?

Thank you.

[danielroe]

Let's track documentation improvements to this in #14723.

[floriankapaun]

Late to the party but encountered this issue as well today and documented my workaround on stackoverflow @nemtsov. Don't know if that's the recommended way to do things, but it works.