nuxt
Second call `queryContent` in `useAsyncData` never resolve
Environment
- Operating System:
Linux - Node Version:
v16.14.2 - Nuxt Version:
3.0.0-rc.8-27687584.51dc736 - Package Manager:
[email protected] - Builder:
vite - User Config:
modules - Runtime Modules:
@nuxt/[email protected],@nuxt/[email protected] - Build Modules:
-
Reproduction
- https://stackblitz.com/edit/github-6ahpka?file=app.vue
- https://stackblitz.com/edit/github-6ahpka-h93acz?file=app.vue
Describe the bug
In my example, tags are first quered, then posts by tag name. The second calls queryContent to find posts stuck and never resolves. If you change the order of calls, the posts will be loaded and the tags will "stuck"
Additional context
No response
Logs
No response
This is an upstream framework issue. You can follow https://github.com/nuxt/nuxt.js/issues/14614.
Still relevant for nuxt rc9 and content 2.1.0
You should see { tags } and { posts } in logs:
https://stackblitz.com/edit/github-6ahpka?file=app.vue
But there are only { tags }
Looks like we can wrap both queries with Promise.all([query1, query2]). With this it worked for me.
Looks like we can wrap both queries with
Promise.all([query1, query2]). With this it worked for me.
It's will not work if second queri depend first
It seems related only for SSR. My changed demo: https://stackblitz.com/edit/github-6ahpka-h93acz?file=app.vue
On SSR query will throw error:
Error: nuxt instance unavailable
at useNuxtApp (/home/projects/github-6ahpka-h93acz/node_modules/nuxt/dist/app/nuxt.mjs:142:13)
at useRuntimeConfig (/home/projects/github-6ahpka-h93acz/node_modules/nuxt/dist/app/nuxt.mjs:150:10)
at withContentBase@/home/projects/github-6ahpka-h93acz/node_modules/ (nuxt/content/dist/runtime/composables/utils.mjs:7:102)
at createQueryFetch/<@/home/projects/github-6ahpka-h93acz/node_modules/ (nuxt/content/dist/runtime/composables/query.mjs:25:41)
at find@/home/projects/github-6ahpka-h93acz/node_modules/ (nuxt/content/dist/runtime/query/query.mjs:27:24)
at <anonymous> (/home/projects/github-6ahpka-h93acz/app.vue:30:10)
at <anonymous> (<anonymous>)
But if you refresh data in client-side it will load successful
