使用 React Native 处理 Apollo 错误

Posted 2023-03-10

【中文标题】使用 React Native 处理 Apollo 错误

【英文标题】：Apollo error handling with react native

【发布时间】：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,
);

【参考方案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(),
);