Apollo Link 响应头文件

本文是小编为大家收集整理的关于Apollo Link 响应头文件的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我在一个简单的React应用程序中使用最新版本的Apollo客户端，我试图从用于显示正在返回的记录集的大小的响应中拔出标题值.

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

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

网络跟踪确实显示响应标题正如预期的那样，所以我怀疑我误解了如何获得所需的底层物体.

我已经检查了文档，但没有什么比在这里的问题中没有任何突出的问题...

推荐答案

当后端响应时，标题应包括:

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

这里你有完整的代码:

前端:(apollo和反应)

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.apollographqql.com/docs/反应/网络/网络层/#wareware

其他推荐答案

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

必须通过操作上下文访问它...有趣的是Dev工具似乎显示标题对象是空的，但是您可以从中拉出命名标题...

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

本文地址：https://www.itbaoku.cn/post/1938128.html

百度翻译此文有道翻译此文

问题描述

I am using the latest version of Apollo Client in a simple React app and I am trying to pull out a header value from the response that is being used to show the size of the record set being returned.

I appreciate that this is not the most elegant way of providing the result set size, but that is how the API has currently been set up.

I was hoping to use the the middleware type options to do this, but when I inspect the response object I can't seem to pull out any headers.

The network trace does show that the response header is as expected so I suspect I am misunderstanding how to get at the underlying objects that I need.

I have checked the documentation, but nothing stands out as obvious hence the question here ...

推荐答案

When the backend responds, the headers should include:

Access-Control-Expose-Headers: * // or the name of your refreshToken field

Here you have the full code:

Front-end: (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()
})

In the backend (express). If we need to refresh the token (e.g: because the actual one is going to expire)

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

Documentation from: https://www.apollographql.com/docs/react/networking/network-layer/#afterware

Have to access it via the operation context ... interestingly the dev tools appears to show that the headers object is empty, but you can then pull named headers from it ...

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

上一篇：如何配置Graphene-Django与持久化的查询一起工作？

下一篇：反应-波罗的动态突变文件