GraphQL：在Apollo客户端中无法读取响应头

Question

我想使用Apollo Client读取响应标头，但不能。

我正在使用Apollo服务器和Apollo客户端进行GraphQL API通信，我想来回发送标头。我已经设置了客户端，以便它发送x-client-version标头，并且我将服务器设置为有时也使用相同的标头进行回复。

问题是，当我尝试使用Apollo客户端读取x-client-version标头（或实际上是任何标头）时，我不确定。我根据网上发现的示例甚至YouTube演练在下面设置了一些Afterware：

const clientVersionAfterware = new ApolloLink((operation, forward) =>
  forward(operation).map(response => {
    const {
      response: { headers },
    } = operation.getContext();
    console.log(headers);
    if (headers) {
      const token = headers.get("x-client-version");
      console.log(token);
      if (token) {
        localStorage.setItem("clientVersion", token);
      }
    }

    return response;
  }),
);

将其附加到链接链：

    const httpLink = handleErrors.concat(
  clientVersionAfterware.concat(new HttpLink(linkOptions)),
);
const batchHttpLink = handleErrors.concat(
  clientVersionAfterware.concat(
    new BatchHttpLink({ ...linkOptions, batchInterval: 10 }),
  ),
);

最终连接ApolloClient构造函数中的链接：

new ApolloClient({
    link: split(
      ({ operationName = "" }) => operationName.startsWith("findOrCreate"),
      httpLink,
      batchHttpLink,
    ),
    cache,
    ...opts,
  });

我听说headers对象为空，但是仍然可以读取headers，但是根据我的经验，这绝对不是事实。我可以看到服务器确实返回了我希望读取的x-client-version标头：

我认为也许升级我的软件包会有所帮助，但它们没有帮助。我正在使用的版本：

"apollo-cache-inmemory": "^1.5.1",
"apollo-client": "^2.5.1",
"apollo-link-batch-http": "^1.2.4",
"apollo-link-error": "^1.1.2",
"apollo-link-http": "^1.5.11",

有什么我想念的吗？预先感谢！

Answer 1

我知道了。

结果证明，更新apollo-client是不够的。我升级了以下软件包，现在填充了headers对象：

<Field name="address" component={addressField} />

我确定您不需要更新apollo-link-error，但是其他两个就足够了（尤其是apollo-link-http）。

Answer 2

我在/ graphql端点上缺少Access-Control-Expose-Headers：

  app.use((req, res, next) => {
    res.append("x-version-backend", `${BUILD_VERSION}`);
    res.append("Access-Control-Expose-Headers", "x-version-backend");
    next();
  });

之后，我可以看到标题：

const responseLogger = new ApolloLink((operation, forward) => {
    return forward(operation).map(result => {
      const headers = operation.getContext().response.headers;
      const backendVersion = headers.get("x-version-backend");
      console.info(`x-version-backend:${backendVersion}`);
      return result;
    });
  });