URQL - GraphQL 如何获取响应标头答案

【问题标题】：URQL - GraphQL how can I get response headersURQL - GraphQL 如何获取响应标头
【发布时间】：2020-08-06 20:02:47
【问题描述】：

当我对 GraphQL 服务器进行查询时，我想读取 http 响应标头中设置的信息。

当我使用 urql 客户端执行查询时，我只得到这些信息：

/** Resulting data from an [operation]{@link Operation}. */
export interface OperationResult<Data = any> {
    /** The [operation]{@link Operation} which has been executed. */
    operation: Operation;
    /** The data returned from the Graphql server. */
    data?: Data;
    /** Any errors resulting from the operation. */
    error?: CombinedError;
    /** Optional extensions return by the Graphql server. */
    extensions?: Record<string, any>;
    /** Optional stale flag added by exchanges that return stale results. */
    stale?: boolean;
}

有没有办法获取响应头？

【问题讨论】：

标签： graphql urql

【解决方案1】：

简短的回答是，不，urql 在其默认行为中不会公开请求的响应标头，如下所示：https://github.com/FormidableLabs/urql/blob/master/packages/core/src/internal/fetchSource.ts#L23-L29 简直被吞下去了。

长答案是，如果您将 fetchExchange 替换为自定义实现，您可以提取您想要的任何信息。不幸的是，这显然是自定义的并且有些工作，但另一方面，urql 允许您深入了解其内部并换掉这种行为。

【讨论】：

【解决方案2】：

您可以在提供的客户端中使用 fetch 包装器（如果它对您的应用来说是全局的），或者在具有 fetch 选项的组件中的特定客户端中使用，如下所示：

  const client = createClient({
    url: `https://example.org/graphql`,
    fetch: (...args) =>
      fetch(...args).then((response) => {
        const myHeader = response.headers.get('my-header');
        if (myHeader) {
          /* do stuff */
        }

        return response;
      }),
    fetchOptions: { credentials: 'include' },
    …
  });

【讨论】：