如何修复Apollo-link中的GraphQL错误

Question

在这里，我既可以使用graphQLErrors，也可以使用networkError：

  const errorLink = onError(({ operation, graphQLErrors, networkError, forward }) => {
    if (process.env.NODE_ENV !== 'production') {
      if (networkError) {
        console.log(`[Network Error]:`, networkError.message);
      }
      if (graphQLErrors) {
        graphQLErrors.forEach((error) => {
          console.log(`[GraphQL Error]:`, error.message);
        });
      }
    }
  });

但是当试图在useQuery内部获取这些错误时，在组件级别，只返回networkError，而graphQLErrors是一个空数组：

let { loading, error, data } = useQuery(GET_ALL_PROJECTS, {
 variables: { pageNum: 1, pageSize: 10 },
 fetchPolicy: 'network-only',
 });

例如，我从后端得到一个错误403到onError函数，但是不能在useQuery内部处理这个错误！

​

如何解决此问题？？

Answer 1

阿波罗客户端向前传递graphQLErrors或networkError，这是真的。我相信这是基于一个假设，当网络错误发生时，返回数据中的GraphQL错误更具技术性，不应该显示给用户。如果你真的想访问你的服务器发送的额外错误信息，你可以在networkError.result.errors中访问它。

我在typescript中提取错误的代码：

const { networkError } = error
const networkGraphQLErrorsPresent =
  networkError &&
  "result" in networkError &&
  networkError.result.errors &&
  networkError.result.errors.length > 0
const extractedError =
  networkGraphQLErrorsPresent ?
    (networkError.result.errors[0] as GraphQLError) :
    undefined