graphqlnuxt.jsapollonuxt3.js

Nuxt3: graphQLErrors in a composable


I'm using useAsyncQuery in a Nuxt3 App and want to access the graphQLErrors. It seems that important attributes like extensions and path are not part of the error object in a composable object.

const { data, error } = await useAsyncQuery<{ my_service: { blabla: BlablaGraph} }>(params);
-- only error.value.message provides something usefull

Basically, everything works, and I see that the desired information is returned from the Backendservice in the file plugins/apollo.ts. Here in the error Object everything (message, path, extensions...) is there.

const errorLink = onError(error => {
    nuxtApp.callHook('apollo:error', error); // must be called bc `@nuxtjs/apollo` will not do it anymore
});

So, how can I access the graphQLErrors in a composable?

Package versions:

"@nuxtjs/apollo": "5.0.0-alpha.6",
"graphql": "^16.6.0",
"nuxt": "3.5.0",

Solution

  • I solved this by writing the graphQLErrors into the message. Then there is everything you want in the composable. Dirty, but it works.

     const errorLink = onError(error => {
        error.graphQLErrors!.at(0)!.message = JSON.stringify(error.graphQLErrors);
        nuxtApp.callHook('apollo:error', error);
     });