【问题标题】：Apollo error handling with react native使用 React Native 处理 Apollo 错误
【发布时间】：2018-07-09 23:15:59
【问题描述】：

apollo 错误处理有问题。

基本上我需要全局错误处理。现在实际上我有全局错误处理，但它总是向我显示 react-natiev 红色框。

有没有办法将其更改为我自己的屏幕视图？ (<ErrorComponent/>) 还是什么？而不是红框？

谢谢！

apollo 1.9.2 版本

这是我的全局错误处理程序：

const handleErrors = ({ response }, next) => {
  const res = response.clone()
  if (!res.ok) {
    if (res.status === 500) {
      throw new Error('Error')
    }
    return next();
  }
}

networkInterface.useAfter([{
  applyAfterware: handleErrors,
}]);

const client = new ApolloClient({
  networkInterface,
});

【问题讨论】：

标签： reactjs react-native apollo apollo-client

【解决方案1】：

我有同样的问题并解决了apollo-link-error 包中全局提到的错误处理程序。

参考网址：https://www.apollographql.com/docs/react/data/error-handling/

import React, {Component} from 'react';
import {AsyncStorage, Alert} from 'react-native';
import {ApolloClient} from 'apollo-client';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {HttpLink} from 'apollo-link-http';
import {setContext} from 'apollo-link-context';
import { onError } from "apollo-link-error";

const httpLink = new HttpLink({uri: NetworkInterFace});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) {
    console.log(`[Network error]: ${networkError}`);
  }
});

const authLink = setContext(async (req, {headers}) => {
  let userDetails = await AsyncStorage.getItem('userToken');
  userDetails = JSON.parse(userDetails);
  if (userDetails === null) {
    return {
      ...headers,
      headers: {
        authorization: '',
      },
    };
  } else {

    return {
      ...headers,
      headers: {
        authorization: userDetails.token,
      },
    };
  }
});
const link = errorLink.concat(authLink.concat(httpLink));
export const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

【讨论】：