Search code examples
graphqlnuxt.jsapollonuxt3.js

Nuxt 3 Apollo query do not refresh on route change

I am using useAsyncQuery and it's simple like https://apollo.nuxtjs.org/ example:

const { data } = await useAsyncQuery(query, variables)

It works fine on page landing / page refresh. As soon as you click on a <NuxtLink /> you get a 400 error.

Many old questions are related to Nuxt 2, old solutions suggest to use v-if="data" on the page / component, or reassign the variable either as const myVariable = data?.value?.entry or declare myVariable = ref() first, or use { watch: [data] } in query, but nothing makes any difference (maybe just avoid the error and leave a white page).

It also seems a confused topic where no unique proper answer is given. Am I just trying to use something not fit for purpose?

Solution

  • For a different test I tried nuxt-graphql-client instead.

    This time I was using a public schema and everything worked. As soon as I used a token, to access a private one, I got the same errors previously experienced with apollo on route change.

    At this point I found an option in the nuxt-graphql-client documentation, which is retainToken: true.

    Adding that fixed the issue. Something similar might exist for apollo (though I could not find it) but, at this point, I might as well stick to nuxt-graphql-client.