Apollo链接响应头

Question

我在一个简单的React应用程序中使用最新版本的Apollo客户端，并尝试从用于显示返回的记录集大小的响应中提取一个标头值。

我知道这不是提供结果集大小的最好方法，但这就是目前API的设置方式。

我希望使用中间件类型选项来完成此操作，但当我检查响应对象时，似乎无法提取任何头文件。

网络跟踪确实显示响应头与预期一致，因此我怀疑我误解了如何获取所需的底层对象。

我已经检查了文档，但没有什么是显而易见的，因此出现了这个问题……

Answer 1

后端响应时，headers应包括：

Access-Control-Expose-Headers: * //或refreshToken字段的名称

下面是完整的代码：

前端：(Apollo & React)

const httpLink = new HttpLink({ uri: URL_SERVER_GRAPHQL })

// Setup the header for the request
const middlewareAuthLink = new ApolloLink((operation, forward) => {
  const token = localStorage.getItem(AUTH_TOKEN)

  const authorizationHeader = token ? `Bearer ${token}` : null
  operation.setContext({
    headers: {
      authorization: authorizationHeader
    }
  })
  return forward(operation)
})



//After the backend responds, we take the refreshToken from headers if it exists, and save it in the cookie.
const afterwareLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    const context = operation.getContext()
    const {
      response: { headers }
    } = context

    if (headers) {
      const refreshToken = headers.get('refreshToken')
      if (refreshToken) {
        localStorage.setItem(AUTH_TOKEN, refreshToken)
      }
    }

    return response
  })
})

const client = new ApolloClient({
  link: from([middlewareAuthLink, afterwareLink, httpLink]),
  cache: new InMemoryCache()
})

在后端(express)。如果我们需要刷新令牌(例如:因为实际的令牌即将过期)

const refreshToken = getNewToken()
res.set({
   'Access-Control-Expose-Headers': 'refreshToken', // The frontEnd can read refreshToken
   refreshToken
})

文档来源：https://www.apollographql.com/docs/react/networking/network-layer/#afterware

Answer 2

在这里找到了答案：https://github.com/apollographql/apollo-client/issues/2514

必须通过操作上下文访问它...有趣的是，dev工具显示headers对象是空的，但是您可以从其中拉出命名的headers……

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

    if (headers) {
      const yourHeader = headers.get('yourHeader');
    }

    return response;
  });
});