Apollo Link响应头

Question

我在一个简单的React应用程序中使用最新版本的Apollo Client,我试图从响应中提取一个标题值,用于显示返回的记录集的大小.

我很欣赏这不是提供结果集大小的最优雅方式,但这就是当前API的设置方式.

我希望使用中间件类型选项来执行此操作,但是当我检查响应对象时,我似乎无法拉出任何标头.

网络跟踪确实显示响应头是预期的,所以我怀疑我误解了如何获得我需要的底层对象.

我已经检查了文档,但没有什么突出显而易见因此这里的问题......

Answer 1

当后端响应时，标头应包括：

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()
})

在后端（快递）。如果我们需要刷新令牌（例如：因为实际的令牌即将过期）

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

必须通过操作上下文访问它...有趣的是,开发工具似乎表明header对象是空的,但是你可以从中拉出命名的头文件......

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;
  });
});