Nuxt3组合式函数中如何获取完整的graphQLErrors信息？

针对你遇到的useAsyncQuery返回的error仅包含message，无法获取extensions、path等完整GraphQL错误属性的问题，给你几个可行的解决办法：

方法一：通过apollo:error钩子获取完整错误 #

既然你已经在plugins/apollo.ts里触发了apollo:error钩子，就可以在组件或页面中直接监听这个钩子来拿到完整的错误对象：

// 在组件/页面中
const nuxtApp = useNuxtApp();

// 监听全局apollo错误
nuxtApp.hook('apollo:error', (error) => {
  // 这里的error包含完整的graphQLErrors、networkError等属性
  console.log(error.graphQLErrors); // 包含path、extensions等信息
});

// 或者在执行useAsyncQuery时临时监听
async function fetchData() {
  let fullError = null;
  const hook = nuxtApp.hook('apollo:error', (err) => {
    fullError = err;
  });

  const { data, error } = await useAsyncQuery<{ my_service: { blabla: BlablaGraph} }>(params);
  
  hook(); // 移除钩子，避免重复触发
  
  if (fullError) {
    // 这里可以访问完整的错误信息
    console.log(fullError.graphQLErrors[0].extensions);
    console.log(fullError.graphQLErrors[0].path);
  }
}

方法二：直接使用ApolloClient实例查询 #

绕过useAsyncQuery的封装，直接获取ApolloClient实例执行查询，这样能拿到最原始的响应结果：

const { client } = useApollo(); // 获取当前Apollo客户端

async function fetchData() {
  try {
    const result = await client.query({
      query: params.query, // 你的GraphQL查询语句
      variables: params.variables // 变量参数
    });
    const data = result.data;
  } catch (error) {
    // 这里的error包含完整的graphQLErrors
    console.log(error.graphQLErrors);
  }
}

方法三：修改Apollo Error Link，将完整错误挂载到全局或传递给组件 #

你可以在plugins/apollo.ts的errorLink里，把完整错误存储到NuxtApp的状态中，之后在组件里读取：

// plugins/apollo.ts
const errorLink = onError(error => {
    nuxtApp.callHook('apollo:error', error);
    // 将错误存储到nuxtApp的全局属性中
    nuxtApp._apolloLastError = error;
});

// 在组件中
const nuxtApp = useNuxtApp();

async function fetchData() {
  const { data, error } = await useAsyncQuery<{ my_service: { blabla: BlablaGraph} }>(params);
  
  if (error.value) {
    const fullError = nuxtApp._apolloLastError;
    console.log(fullError.graphQLErrors);
  }
}

注意：因为你使用的是@nuxtjs/apollo的alpha版本（5.0.0-alpha.6），这个版本可能还存在一些API封装不完整的问题，上述方法都是基于现有功能的临时解决方案，后续版本可能会完善useAsyncQuery的错误返回结构。

内容的提问来源于stack exchange，提问作者user3603819