如何使用 ApolloGraphQl 区分服务器错误和无网络？答案

【问题标题】：How do I differentiate between server errors and no network with ApolloGraphQl?如何使用 ApolloGraphQl 区分服务器错误和无网络？
【发布时间】：2022-11-04 00:42:02
【问题描述】：

我正在使用 ApolloGraphQl 库从后端获取数据。 https://www.apollographql.com/docs/react/data/error-handling

在我的 React 应用程序中，我想在网络中断时显示“您离线”页面。

const {
    data
    loading,
    error,
} = useQuery('my query', 'cache-and-network');

我可以解构结果以获得 ApolloError。但是，我怎么知道错误是否是由于没有网络引起的？

我看到我可以得到一个 networkError (https://www.apollographql.com/docs/react/data/error-handling#network-errors)，但它通常是 4xx 或 5xx 错误，而不是 HTTP 错误代码 -1。

我怎么知道由于没有网络而出现错误？

【问题讨论】：

标签： reactjs http apollo-client

【解决方案1】：

你可以查看 Apollo 的错误对象的 networkError 键。

这是一个您可能会发现在解释 Apollo 错误时有用的函数：

import { ApolloError } from '@apollo/client/errors';

export const apolloErrorToStrings = (apolloError: ApolloError) => {
  const errorArray: Array<string> = [];
  let isNetworkError = false,
    isAuthenticationError = false;

  if (apolloError.graphQLErrors) {
    apolloError.graphQLErrors.forEach((error) => {
      errorArray.push(
        `${error.extensions?.code || 'unknown'}: ${error.message}`
      );
      if (error.extensions?.code === 'UNAUTHENTICATED')
        isAuthenticationError = true;
    });
  }
  if (apolloError.networkError) {
    errorArray.push('CONNECTION FAILED: Are you connected to the internet?');
    isNetworkError = true;
  }
  return { errorArray, isNetworkError, isAuthenticationError };
};

【讨论】：