apollo

apollo copied to clipboard

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: [email protected]
• Builder: -
• User Config: devtools, css, modules, apollo, device, runtimeConfig
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected]

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

@Diizzayy @danielroe

Okay, I figured the cause of this bug.

https://github.com/nuxt-modules/apollo/blob/04c452cf53ad366a80cd4aea215f86cb5fda5e71/src/runtime/composables.ts#L53

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)