Only the last useFetch fires in a component with multiple fetches

[jas777]

Environment

------------------------------
- Operating System: `Windows_NT`
- Node Version:     `v16.13.1`
- Nuxt Version:     `3.0.0-rc.8`
- Package Manager:  `yarn@1.22.17`
- Builder:          `vite`
- User Config:      `head`, `css`, `plugins`, `publicRuntimeConfig`, `build`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

https://stackblitz.com/edit/github-2cwqjm-gdnhe4?file=app.vue

Describe the bug

When more than one useFetch is used in a component - only the last one fires and all other calls return null except for the first time the page is loaded.

Additional context

I've only tested fetches in onMounted, but I don't know whether it's relevant to the issue

Logs

No response

[TheDutchCoder]

I can confirm this issue as well!

[ShaggyTech]

I believe you'll have to use Promise.all() like so:

onMounted(async () => {
  const [{ data: r1 }, { data: r2 }] = await Promise.all([fetch1(), fetch2()]);

  d1.value = r1;
  d2.value = r2;
});

---

Forked your example with the fix:

https://stackblitz.com/edit/github-2cwqjm-qtsgju?file=app.vue

See also this discussion:
#12774

[danielroe]

Let me reiterate my comment in the linked discussion. Do not use useFetch within a click handler or equivalent. Like all composables, it must be run within an appropriate context. Issue to follow for adding a guide to composables: #14723.

In your case, use $fetch directly to perform programmatic data fetching.