在组件侧处理Apollo错误

Question

题

我怎样才能反应到阿波罗错误在我的组件？

例如，如果抛出“网络脱机”错误，我想显示一个红色横幅。或如果显示某种类型的错误，则显示模态；或如果引发另一种错误，则呈现<Redirect>（来自react-routed-dom）。

我尝试了什么

我阅读了有关错误处理的文档章节，但仅说明了如何设置Apollo链接以充当请求的中间件，以便在那里捕获错误。据我所知，鉴于这是一个终止链接，不可能将数据从该链接向下传递到组件。

我尝试使用错误边界组件，但似乎并未真正引发Apollo错误。即使使用await语法也不行。

Answer 1

正如您已经指出的，您可以使用apollo-link-error包 Link。

如果您还用于react-router-dom页面之间的路由，则可以使用浏览器历史记录或重定向组件重定向到带有状态对象（路由历史记录）的错误页面。状态对象包含您想要显示的错误。

设置可能如下所示：

• 创建浏览器历史记录

import { History, createBrowserHistory } from 'history';
   
/* If using Typescript, you can make this object Readonly as follows */
export type ReadonlyBrowserHistory = Readonly<History>
const browserHistory: ReadonlyBrowserHistory = createBrowserHistory();

export default browserHistory;

• 添加具有浏览器历史记录的路由器（带有使历史记录属性只读的选项）

import browserHistory from './browserHistory'
import apolloClient from './apolloClient'

... 

ReactDOM.render((
   <ApolloProvider client={apolloClient}>
      <Router history={browserHistory}>
         <App />
      </Router>
   </ApolloProvider>
), document.getElementById("root"));

• 添加带有路由的链接到apollo客户端

import browserHistory from './browserHistory'

const errorLink = onError(({ networkError, graphQLErrors }) => {
   if (graphQLErrors) {
      browserHistory.push("/error", { errors: graphQLErrors });
   }
   else if (networkError) {
      browserHistory.push("/error", { errors: networkError });
   };
});

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

const httpLinkWithErrorHandling = ApolloLink.from([
   errorLink,
   httpLink,
]);

const apolloClient = new ApolloClient({
   link,
   ...
});

export default apolloClient;

• 错误页面可以从路线位置属性中检索错误

const ErrorPage = ({ location: { state } }) => {

  console.log(state);

  return (<div>error page</div>)
};