useAsyncQuery only work in server process

[wlodevelopteam]

Environment

"@nuxtjs/apollo": "^5.0.0-alpha.5",
"@vue/apollo-composable": "^4.0.0-beta.4",
"apollo-cache-inmemory": "^1.6.6",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
"nuxt": "^3.3.1",
"vue": "^3.2.47"

Describe the bug

in a simple query on Nuxt3 project, in app.vue, we wrote this query:

const { data } = await useAsyncQuery(inbox_seen_graphQL_Query)
console.log(data)

in process.server, data filled but in process.client, data empty and when try to render, first data show and a next moment, disappeared.

Expected behaviour

show data on render

Reproduction

No response

Additional context

No response

Logs

server:
RefImpl {                                                                                                                01:10:11
  __v_isShallow: false,
  dep: undefined,
  __v_isRef: true,
  _rawValue: { inbox: { inbox: [Array] } },
  _value: { inbox: { inbox: [Array] } }
}

client:
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: null, _value: null}

[iamandrewluca]

Are you able to provide a reproduction repo?

[lisaschumann]

@iamandrewluca I am having the same/similar issue, where it does not actually call graphql with useAsyncQuery. Just on the second time around. This is what I am calling from my nuxt pina store:

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    countries: null as null | Ref<unknown>,
  }),
  actions: {
    async test() {
      const query = gql`
        query getCountries {
          country(code: "BR") {
            name
            native
            capital
            emoji
            currency
            languages {
              code
              name
            }
          }
        }
      `
      const variables = { limit: 5 }
      const { data } = await useAsyncQuery(query, variables);
      this.countries = data;
    },
  },
})

Someone seems to have the same issue here: https://stackoverflow.com/questions/75587477/why-my-useasyncquery-does-not-call-up-my-api

Any help is greatly appriciated.

[iamandrewluca]

I think in your use case useAsyncQuery is used wrong.

useAsyncQuery should be used in script/setup context, you are using it inside a pinia action

in your case you should directly use apollo client

[ssyberg]

@iamandrewluca can you elaborate, the docs are not very clear on when you should/shouldn't useAsyncQuery and it's unclear to me why you wouldn't use it in this context

[iamandrewluca]

useAsyncQuery is a hook composable, it needs to be called only in setup for the best functionality. It cannot be called in other places. These are the Vue rules, it has nothing to do with Nuxt Apollo docs.

https://vuejs.org/guide/reusability/composables.html#usage-restrictions

E.g.

<script setup>
const response = await useAsyncQuery(YourDocument)
</script>

<script>
export default defineComponent({
  async setup() {
    const response = await useAsyncQuery(YourDocument)
  }
})
</script>

[ssyberg]

@iamandrewluca thanks for the response, I'm probably not familiar enough with vue to fully understand this, but all of our code is in setup so I'm not even sure what "other places" would mean in this context. We are using useAsyncQuery in another composable that is then included in our setup, is that ok?

[ssyberg]

FWIW I've tracked most of our issues down to something I think may be unrelated, specifically after many hours of testing it's clear that useAsyncQuery does not respect cache settings when run on the client

[gerbenvandijk]

I ran into a similar issue where I had a <client-only> component that was calling useAsyncQuery in its script setup.

Oddly, adding an await nextTick() call fixed the issue.