Question

问题

我如何对我的组件中的Apollo错误做出反应？

我希望例如，如果网络离线＆＃34;错误被抛出;如果显示某种类型的错误，则显示模态;如果抛出另一种错误，则呈现<Redirect>（来自react-routed-dom）。

我尝试了什么

我阅读了文档chapter about error handling，但它只解释了如何设置Apollo链接作为请求的中间件，以便在那里捕获错误。据我所知，由于它是终止链接，因此无法将数据从该链接传递到组件。

我尝试使用error boundary components，但似乎并没有真正抛出阿波罗错误。即使使用await语法也不行。

Answer 1

正如您已经指出的那样，您可以使用react-router-dom包 Link

如果您还使用import { createBrowserHistory } from 'history'; const browserHistory = createBrowserHistory(); export default browserHistory;在页面之间进行路由，则可以使用浏览器历史记录或重定向组件重定向到具有状态对象（routing history）的错误页面。状态对象包含您要显示的错误。

设置可能如下所示：

创建浏览器历史记录

＆＃13;

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

＆＃13;

添加具有浏览器历史记录的路由器

＆＃13;

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;

＆＃13;

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

＆＃13;

const ErrorPage = ({ location: { state } }) => {

  console.log(state);

  return (<div>error page</div>)
};

＆＃13;

错误页面可以从路径位置prop

＆＃13;

{{1}}

＆＃13;

Answer 2

我通过将查询的errorPolicy设置为none来解决了问题，然后可以捕获从查询中抛出的graphQLErrors对象。

示例：

yourQuery()
    .then()
    .catch((error) => { error.graphQLErrors });

处理组件侧的Apollo错误

问题

我尝试了什么

2 个答案: