使用react native进行Apollo错误处理

时间:2018-01-30 23:25:07

标签: reactjs react-native apollo apollo-client

apollo错误处理有问题。

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

有没有办法将其更改为我自己的屏幕视图? (IPv4 addresses: %pI4 1.2.3.4 %pi4 001.002.003.004 %p[Ii][hnbl] For printing IPv4 dot-separated decimal addresses. The 'I4' and 'i4' specifiers result in a printed address with ('i4') or without ('I4') leading zeros. )还是什么?而不是红盒子?

谢谢!

apollo 1.9.2的版本

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

<ErrorComponent/>

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,并解决了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(),
});