Invariant Violation

[peacheszm]

Environment

• Operating System: Darwin
• Node Version: v18.16.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: npm@9.5.1
• Builder: -
• User Config: devtools, css, modules, apollo, device, runtimeConfig
• Runtime Modules: @nuxtjs/apollo@5.0.0-alpha.11, @nuxtjs/device@3.1.1

Describe the bug

Following the documentation, i keep getting this error.

Invariant Violation: An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.8%22%2C%22message%22%3A76%2C%22args%22%3A%5B%5D%7D
at new InvariantError (http://localhost:3000/_nuxt/node_modules/ts-invariant/lib/invariant.js?v=9ec4a286:11:28)
at invariant (http://localhost:3000/_nuxt/node_modules/ts-invariant/lib/invariant.js?v=9ec4a286:24:15)
at invariant (http://localhost:3000/_nuxt/node_modules/@apollo/client/utilities/globals/invariantWrappers.js?v=9ec4a286:28:9)
at getQueryDefinition (http://localhost:3000/_nuxt/node_modules/@apollo/client/utilities/graphql/getFromAST.js?v=9ec4a286:38:5)
at StoreReader.diffQueryAgainstStore (http://localhost:3000/_nuxt/node_modules/@apollo/client/cache/inmemory/readFromStore.js?v=9ec4a286:86:60)
at InMemoryCache.diff (http://localhost:3000/_nuxt/node_modules/@apollo/client/cache/inmemory/inMemoryCache.js?v=9ec4a286:184:33)
at QueryInfo.getDiff (http://localhost:3000/_nuxt/node_modules/@apollo/client/core/QueryInfo.js?v=9ec4a286:104:31)
at readCache (http://localhost:3000/_nuxt/node_modules/@apollo/client/core/QueryManager.js?v=9ec4a286:996:56)
at QueryManager.fetchQueryByPolicy (http://localhost:3000/_nuxt/node_modules/@apollo/client/core/QueryManager.js?v=9ec4a286:1051:28)
at fromVariables (http://localhost:3000/_nuxt/node_modules/@apollo/client/core/QueryManager.js?v=9ec4a286:806:41)

Expected behaviour

To be able to make a call to GQL

Reproduction

No response

Additional context

No response

Logs

No response

[techlab23]

@Diizzayy @danielroe

Okay, I figured the cause of this bug.

apollo/src/runtime/composables.ts

Line 53 in 04c452c

const fn = () => clients![clientId]?.query({ query, variables, fetchPolicy: cache ? 'cache-first' : 'no-cache', context }).then(r => r.data)

This is happening because useAsyncQuery make a call using client.query({ query: GQL_QUERY, variables}) and if you are sending a mutation it will throw the Invariant Error.

To fix it, if it's a mutation then useAsyncQuery must use mutate method of the client and mutation prop client.mutate({ mutation: GQL_MUTATION, variables }), for the call to go through.

Here's I resolved it in my case, instead of using useAsyncQuery, I used useMutation helper from vue-apollo as workaround.

useMutation composable usage (Link)

const { mutate } = useMutation<YourMutationType>(MutationDocument)
const result = await mutate(variables)