在 Apollo React 的 onError 中读取响应标头

Question

在 React Apollo 客户端中，我们配置了一些链接。

const apollo = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([
    onErrorLink,
    afterwareLink,
    httpLink
  ])
});

在我们的应用程序中，当会话超时时，我们返回带有200 状态的响应和一些响应标头（timeout: true）。通过使用这些响应头，我们需要在 UI 上显示一些对话框。响应头也有content-type: text/html。另请记住，sessions 在我们组织的联邦级别 (SSO) 上维护，我们无法控制响应上下文。

当会话超时并且我们收到来自服务器的响应时，Apollo react client onError 链接会启动，我们尝试访问响应如下。

const context = operation.getContext();
const response = context.response;
const headers = response.headers;

在上面的代码中，context 从来没有response 属性，因此response 是undefined。因此，我无法访问标头值。

分析

const afterwareLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    const context = operation.getContext();
    const response = context.response;
    const headers = response.headers;
    
    return response;
  })
};

1. 我见过出现错误，只有onError被解决，afterwareLink地图功能永远不会触发。
2. response 只有通过 Apollo 提供的 forward 函数才会填充到 context 中。
3. 在成功的 API 调用中，afterwareLink 映射函数会解析，并且我能够很好地找到所有标题。
4. Solutions online 类似，但不起作用。

我被难住了。我可以清楚地看到 Dev Tools 和 Fiddler 中的响应标头。它肯定在那里。只是阿波罗不允许我访问它。就我而言，networkError 或 graphQLErrors 没有多大用处。

Answer 1

这是要解决的几个步骤问题。在下面分享我的发现和解决方案。

1. 标题

确保来自 API 的响应具有以下标头值。

Access-Control-Allow-Origin: http://uiclient.com
Access-Control-Expose-Headers: *

第一个标头将确保浏览器满意并允许 UI 解析响应。第二个标头将确保 UI 可以读取响应标头。

1. 响应内容类型

在我的情况下，响应类型不是 Graph 所期望的，并且无法更改，因为这是来自联邦层 (SSO)。在第三方服务的情况下，其他人可能会遇到同样的问题，401、403 或其他状态码。

为了解决这个问题，我写了一个简单的自定义获取函数并将其附加到HttpLink。

const httpFetch = (uri, options) => {
  return fetch(uri, options).then(response => {
    // ... read headers from response.headers.
    
    if (response.status >= 500) {  // or handle 400 errors
      return Promise.reject(response.status);
    }
    return response;
  }).catch(error => {
    return Promise.reject(error);
  });
};

const httpLink = new HttpLink({
  uri: 'https://serviceapi.com',
  fetch: httpFetch
});

1. 处理httpFetch

当您的响应不是 JSON（或 JSON）时，此技术可用于在 Apollo 客户端中读取数据。就我而言，我首先检查了标头，如果标头具有会话超时值，则使用自定义对象解决承诺（因为主要内容将是 HTML）。

以上步骤将主要帮助您自定义 Apollo 中的任何响应。另请注意，我没有编写任何自定义中间件（或链接）来解决此问题。