未处理的错误网络错误：网络请求失败错误：网络请求失败错误：在新的ApolloError

Question

  

当我的应用程序（react-native）在互联网连接丢失时出现此错误。   当我在离线模式下启动应用程序时，初始组件呈现，尝试执行查询，应用程序崩溃。   当我的应用程序与互联网连接时，它完美无缺。但是我的应用程序崩溃了。我该如何处理这个错误？

ExceptionsManager.js：71“未处理的错误网络错误：网络请求失败错误：网络错误：新的ApolloError网络请求失败”

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { AsyncStorage } from 'react-native';
import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';

const wsClient = new SubscriptionClient('wss://172.20.32.6:5000', {
  reconnect: true,
  connectionParams: {
    accessToken: 'jka sdhkjashd jkashdjk ashdas'
  }
});

const networkInterface = createNetworkInterface({
   uri: 'http://172.20.32.6:8000/graphql',
   opts: {
    credentials: 'same-origin'
    }
});
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
);
const client = new ApolloClient({
  dataIdFromObject: o => o.id,
  networkInterface: networkInterfaceWithSubscriptions

});
networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    // get the authentication token from local storage if it exists
    AsyncStorage.getItem('sessionToken').then((token) => {
      req.options.headers.Authorization = token ? `${token}` : null;
      next();
    }
    );
  }
}]);
export default client;

Answer 1

为了避免这个非常无用的错误，请在呈现查询结果的组件顶部添加类似这样的内容。

if (data && data.error) {
    return (
      <View>
        <Text>{JSON.stringify(data.error)}</Text>
      </View>
    )
}

有关处理错误的更多信息，请参阅此github问题 https://github.com/apollographql/react-apollo/issues/604