如何使用ApolloGraphQL区分服务器错误与无网络状态？

首先修正你当前useQuery的写法错误，第二个参数应为配置对象：

const { data, loading, error } = useQuery(MY_QUERY, {
  fetchPolicy: 'cache-and-network'
});

要判断错误是否由无网络导致，核心是分析error.networkError的特征：

当完全离线时，Apollo抛出的网络错误本质是浏览器原生的TypeError，主流浏览器中错误消息通常包含Failed to fetch或NetworkError字样。你可以通过以下逻辑判断：

• 检查networkError是否为TypeError实例
• 匹配错误消息中的离线特征关键词

示例判断函数 #

const isOfflineError = (error) => {
  if (!error?.networkError) return false;
  return error.networkError instanceof TypeError && 
         /Failed to fetch|NetworkError/i.test(error.networkError.message);
};

在组件中使用 #

if (error && isOfflineError(error)) {
  return <div>您已离线</div>;
}

补充：结合浏览器API辅助判断 #

你可以搭配浏览器的navigator.onLine API做双重验证，但注意该API存在误判可能，仅作为补充：

const isOffline = !navigator.onLine && isOfflineError(error);

不同环境下的错误消息可能略有差异，可根据实际测试结果调整正则匹配的关键词。

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