reactjs - Apollo 错误处理与 React Native

Question

apollo 错误处理存在问题。

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

有没有办法将其更改为我自己的屏幕 View ？ ( <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,
});

Answer 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(),
});