useAsyncData Does Not Work Server-Side In Dev Mode

[buffalom]

Environment

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.2.3
• Nitro Version: 2.2.3
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: modules, runtimeConfig
• Runtime Modules: nuxt-graphql-client@0.2.25
• Build Modules: -

---

• Operating System: Darwin
• Node Version: v18.13.0
• Nuxt Version: 3.2.3
• Nitro Version: 2.2.3
• Package Manager: yarn@1.22.17
• Builder: vite
• User Config: runtimeConfig, modules
• Runtime Modules: nuxt-graphql-client@0.2.25
• Build Modules: -

Describe the bug

I have a freshly installed Nuxt 3 app with the nuxt-graphql-client module. However, all the nuxt-graphql-client function (namely useAsyncData and GqlXXX()) don't seem to work server-side in dev mode. They don't throw an error, but they just return null as the data. If the files are saved and the app is hot-reloaded, the request is made client-side and the data is returned as expected.

As soon as the app is built for production (using yarn build) the function also work server-side.

Expected behaviour

There should not be a difference from the dev mode to the prod build. The data should also be present server-side in dev mode.

Reproduction

https://stackblitz.com/edit/github-stxa8b?file=app.vue

Additional context

Demo video on Stackblitz

I have the same issue on Stackblitz as well as locally on my M1 MacBook (demo video).

Let me know if you need more context. If it is my fault and I am doing something wrong, please let me know. I would love your help.

Logs

No response

[boboldehampsink]

Also seeing this

[theLeroy]

Also seeing this

[maximilliangeorge]

Is this a client side or server side issue? In the text above you say it doesn't work server side, but in the title you say it doesn't work client side.

I'm currently having similar issues when using GqlXXX-functions upon initial load (so server side). Everything seems to work client side; I can inject the Gql-functions through HMR by commenting them out, refreshing the page, and then uncommenting them.

It also works in production (npm run build && npm run preview) as expected.

[buffalom]

My bad, thanks for pointing it out. It's a server-side issue. Like you said, on initial load the data is not there.

[Diizzayy]

@buffalom This issue should be fixed in the latest version (0.2.27).

[boboldehampsink]

@Diizzayy I'm still seeing this issue in 0.2.27

[maximilliangeorge]

I had issues after upgrading the package. However, after deleting package-lock.json and doing a fresh npm install it now works. Thanks for the swift response guys! This package is just incredible.

[buffalom]

Seems to be working just fine for me. Thanks a bunch for fixing this so quickly.

[thomas4Bitcraft]

I have the error again for nuxt 3.4.3 and the version 0.2.27.

This is the component:

<template>
    <div>
        <h1 class="text-red-500 text-h1">{{ data?.entry?.modules?.length ?? 0 }}</h1>
    </div>
</template>
<script lang="ts" setup>
const { data, error, refresh } = await useAsyncGql('homepage')

console.log(error.value)

onMounted(() => {
    refresh()
})
</script>

The outputted error is:

H3Error                                                                                                                                   
    at Module.createError (file:///xxx/node_modules/h3/dist/index.mjs:128:15)
    at Module.createError (xxx/node_modules/nuxt/dist/app/composables/error.js:37:38)
    at xxx/node_modules/nuxt/dist/app/composables/asyncData.js:80:59
    at <anonymous>
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)                                                                      
    at async setup (xxx/pages/index.vue:15:163) {
  statusCode: 500,
  fatal: false,
  unhandled: false,
  statusMessage: undefined,
  __nuxt_error: true
}

If I use the same component but add:

onMounted(() => {
    refresh()
})

the data appears. Any ideas why this is happening?