在 React apollo 中处理每个请求后的错误答案

【问题标题】：Handle errors after every request in React apollo在 React apollo 中处理每个请求后的错误
【发布时间】：2018-02-23 14:52:31
【问题描述】：

如何创建将捕获所有错误的中间件，例如我有请求需要令牌，令牌可能已过期或损坏，因此我需要在每个请求上捕获此错误并能够调用查询和突变。

例如：在过期令牌上，我必须重新获取令牌并重复请求。在令牌损坏时，我必须注销用户并重新获取所有查询。我需要处理的错误类型可能很多。

在（react-apollo 文档）

networkInterface.useAfter([{
  applyAfterware({ response }, next) {
    if (response.status === 401) {
      logout();
    }
    next();
  }
}]);

我无法访问 graphql 错误，并调用查询或突变。

【问题讨论】：

标签： javascript reactjs graphql-js react-apollo

【解决方案1】：

您可以在发送每个请求之前检查您是否有令牌。如果您没有令牌，您应该在应用程序的其他地方处理它，或者可能直接从中间件函数中获取另一个令牌。您可以制作包含所有必须具有令牌的组件的高阶组件。如果由于某种原因没有令牌，您可以获取另一个令牌并将其存储到 localStorage（如果您使用的是浏览器）或 asyncstorage（如果您使用的是 React Native）。将其分配给 localStorage 或 asyncStorage 后，下面的中间件代码 sn-p 将在您发送的每个请求之前检查令牌，这包括所有查询和突变。如果您发现您的用户没有令牌，您还可以在组件中将他们重定向到他们必须再次登录的页面，然后从那里将令牌设置为 localstorage 或 asyncstorage。再次，apollo 客户端的中间件可以通过这种方式访问它。

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { checkForSessionToken } from '../../utils/authentication';

const networkInterface = createNetworkInterface({
  uri: 'https://localhost:4000'
});

networkInterface.use([{
  applyMiddleware(req, next) {
    // Create the header object if needed.
    if (!req.options.headers) {
      req.options.headers = {};
    }

    // get the authentication token from Async storage
    // and assign it to the request object
    checkForSessionToken()
    .then(SESSION_TOKEN => {
      if (SESSION_TOKEN === null || SESSION_TOKEN === undefined {
          fetchNewToken()
          .then(SESSION_TOKEN => {
              localStorage.setItem('token', SESSION_TOKEN);
              req.options.headers.Authorization = `Bearer 
              ${SESSION_TOKEN}`;
          }
      } else {
       req.options.headers.Authorization = `Bearer ${SESSION_TOKEN}`;
      }

      next();
    })
    .catch(error => {
      fetchNewToken()
      .then(SESSION_TOKEN => {
          localStorage.setItem('token', token);
          req.options.headers.Authorization = `Bearer 
          ${SESSION_TOKEN}`;
      }

      next();
    })
  }
}]);

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: o => o.id
});

export default client;

【讨论】：