后端【免费下载链接】graffleSimple GraphQL Client for JavaScript. Minimal. Extensible. Type Safe. Runs everywhere.项目地址https://gitcode.com/gh_mirrors/gr/graffle点击查看免费下载Graffle 是一个极简、可扩展、类型安全、随处运行的 JavaScript GraphQL 客户端。本文围绕仓库中 Headers 示例 与 Dynamic Headers 示例 展开讲解如何通过transport配置控制 HTTP 请求头包括静态设置、用空字符串取消已设置的请求头、通过raw.headers透传底层RequestInit以及借助anyware扩展在每个请求上动态注入请求头。读完你将掌握 Graffle 请求头配置的完整玩法与底层合并原理。示例总览两个互补的 Headers 用法transport-http_headers主题在仓库中对应两个示例它们覆盖了请求头控制的两种主流场景Headers静态配置transport-http_headers_raw__headers.ts —— 在构建客户端时一次性声明请求头并用空字符串撤销先前设置的请求头。Dynamic Headers动态注入transport-http_extension_headers__dynamicHeaders.ts —— 通过anyware扩展在每次请求发出前动态改写请求头例如追加时间戳。这两个示例的网站页面headers.md 与对应页面由脚本 generate-docs.ts 从示例源码自动生成包括代码块与真实运行输出可直接对照验证。静态请求头transport 配置的 headers 字段先看核心示例 transport-http_headers_raw__headers.ts 的完整代码import { Graffle } from graffle import { show } from ../$/helpers.js import { publicGraphQLSchemaEndpoints } from ../$/helpers.js const graffle Graffle .create() .transport({ url: publicGraphQLSchemaEndpoints.Pokemon, headers: { authorization: Bearer MY_TOKEN, x-something-to-unset: true, }, raw: { headers: { x-from-raw: true, }, }, }) .transport({ headers: { x-something-to-unset: }, }) .anyware(({ exchange }) { if (exchange.input.transportType ! http) return exchange() show(exchange.input.request.headers) return exchange() }) await graffle.gql({ pokemons { name } }).$send()代码做了三件事通过.transport({ url, headers, raw })为 HTTP 传输声明基础配置authorization: Bearer MY_TOKEN与x-something-to-unset: true两个请求头raw.headers额外声明x-from-raw: true。再次调用.transport({ headers: { x-something-to-unset: } })用一个空字符串请求头把先前设置的x-something-to-unset取消。用anyware观察请求发出前的实际请求头仅拦截transportType http的交换。运行输出请求头合并后的真实形态示例对应的运行输出见 transport-http_headers_raw__headers.output.txt---------------------------------------- SHOW ---------------------------------------- Headers { accept: application/graphql-responsejson; charsetutf-8, application/json; charsetutf-8, content-type: application/json, x-from-raw: true, authorization: Bearer MY_TOKEN }从中可以看到三个关键事实Graffle 自动为请求添加了accept: application/graphql-responsejson; charsetutf-8, application/json; charsetutf-8与content-type: application/json两个默认请求头与 TransportHttp.ts 中postRequestHeadersRec的默认合并逻辑一致。x-from-raw: true来自raw.headers与authorization来自headers都成功进入最终请求。被空字符串取消的x-something-to-unset没有出现在最终请求头中验证了空字符串请求头会取消先前设置的请求头这一行为。空字符串取消机制配置合并的源码依据为什么空字符串能取消请求头这并非魔法而是 HTTP 传输配置器在配置合并阶段就完成的当新配置的某个请求头值为空字符串时合并策略用空值覆盖旧值最终在构造RequestInit时该请求头不再被包含。源码依据位于 TransportHttp.ts 的inputResolverreturn { methodMode: input.methodMode ?? current.methodMode, raw: input.raw ?? current.raw, url, headers: Http.Headers.mergeInitWithStrategyMerge(current.headers, input.headers), }每次调用.transport(config)都会执行一次合并current.headers是已累积的配置input.headers是本次传入的新配置二者经Http.Headers.mergeInitWithStrategyMerge合并后写回配置状态。因为请求头是可累积合并而非整体替换所以示例中第二次.transport()只传headers而不传url时url仍保留第一次配置的 Pokemon 端点。同理raw也是逐层合并的raw: input.raw ?? current.raw保证只覆盖本次显式给出的字段。这种链式合并 空值取消的设计让请求头配置具备很强的组合性你可以在一个地方设置公共请求头如认证在另一个地方按需覆盖或撤销个别请求头。配置项速查transport配置中与请求头相关的字段类型定义见 TransportHttp.ts 的ConfigurationInput字段类型说明headersHeadersInit请求头配置支持普通对象多次调用会与既有请求头合并空字符串值表示取消该请求头raw.headersHeadersInit透传到底层RequestInit.headers用于覆盖需要低层控制、且不属于 Graffle 高层抽象的场景raw其余字段RequestInit底层fetch的RequestInit透传如mode: cors参见 transport-http_raw.ts另外transport方法本身是不可变的它会返回一个新客户端实例原客户端不被修改如果配置没有产生有效变化则出于性能考虑返回同一实例见 transport.ts 的类型注释。动态请求头用 anyware 在每个请求上注入 Headers静态配置适合请求头始终不变的场景但真实项目中请求头往往依赖每次请求的上下文如时效性的 token、追踪 ID、时间戳。Graffle 的anyware扩展机制正是为此设计。看 transport-http_extension_headers__dynamicHeaders.tsimport { Graffle } from graffle import { publicGraphQLSchemaEndpoints, show } from ../$/helpers.js const graffle Graffle .create() .transport({ url: publicGraphQLSchemaEndpoints.Pokemon, }) .anyware(({ exchange }) { if (exchange.input.transportType ! http) return exchange() return exchange({ input: { ...exchange.input, request: { ...exchange.input.request, headers: [ ...new Headers(exchange.input.request.headers), [X-Sent-At-Time, Date.now().toString()], ], }, }, }) }) .anyware(({ exchange }) { show(exchange.input.request) return exchange() }) await graffle.gql({ pokemons { name } }).$send()要点拆解exchange(input)用于对请求进行就地改造后继续传递exchange()不带参数则原样放行。改造方式是把请求头先展开为Headers实例再追加X-Sent-At-Time: 当前毫秒时间戳这一对新条目。因为请求头在交换管道中是一个可展开的Headers数据结构见 TransportHttp.ts 中ExchangePostRequest/ExchangeGetRequest类型所以可以安全地展开、追加、再重建。两个anyware按注册顺序构成管道第一个负责注入时间戳第二个负责打印改造后的完整请求。运行输出动态头确实进入了请求对应的输出见 transport-http_extension_headers__dynamicHeaders.output.txt---------------------------------------- SHOW ---------------------------------------- { methodMode: post, headers: [ [ accept, application/graphql-responsejson; charsetutf-8, application/json; charsetutf-8 ], [ content-type, application/json ], [ X-Sent-At-Time, 1762136942519 ] ], method: post, ... body: {query:{ pokemons { name } }} }输出证明在anyware管道中请求头已从普通对象形态变为Headers条目数组形态[key, value]元组X-Sent-At-Time被成功追加到 Graffle 默认请求头之后。这也意味着你可以用同样的方式实现 per-request 的动态认证头、链路追踪头等。实战建议与组合技巧综合两个示例与源码给出几条可直接落地的实践建议静态 动态结合把不变的基础请求头如content-type之外的业务头、基础认证头放进.transport({ headers })把每次请求都变化的头时间戳、trace id、短期 token放进anyware中动态注入。按层拆分配置利用多次.transport()累积合并的特性把 URL、公共请求头、raw低层选项分开配置代码更清晰且后续覆盖单个请求头时不会影响其他配置。撤销请求头用空字符串当上游如框架预设或公共配置设置了某个请求头、而当前请求希望不带它时传headers: { 头名: }即可不必重建整个客户端。低层需求走raw需要控制mode、credentials、signal等标准RequestInit字段时统一放入raw参考 transport-http_raw.ts 中对raw: { mode: cors }的用法。用 anyware 做请求头审计像两个示例那样挂一个只读anyware打印exchange.input.request.headers可以低成本实现请求头日志与调试。延伸阅读完整的 HTTP 传输配置项说明与ConfigurationInput/ConfigurationNormalized类型定义TransportHttp.ts请求头合并的实现入口mergeInitWithStrategyMerge与默认请求头组装逻辑TransportHttp.tstransport方法的不可变语义与重载形式transport.ts更多 HTTP 传输主题示例abort、custom fetch、method-get、raw 等examples/10_transport-http网站示例页面的自动生成逻辑含 Twoslash 代码块与输出快照generate-docs.ts赞分享后端【免费下载链接】graffleSimple GraphQL Client for JavaScript. Minimal. Extensible. Type Safe. Runs everywhere.项目地址https://gitcode.com/gh_mirrors/gr/graffle点击查看免费下载相关推荐Delta 与 VSCode 集成指南用超链接让 diff、grep 结果一键跳转到编辑器Delta 与 VSCode 集成指南用超链接让 diff、grep 结果一键跳转到编辑器 Delta 是一个面向 git、diff、grep、 rg jso后端Transformers.js 环境配置完全指南用 env 对象掌控模型加载、缓存与 WASM 后端Transformers.js 环境配置完全指南用 env 对象掌控模型加载、缓存与 WASM 后端 本文是 Transformers.js huggin后端Graffle 请求头Headers配置实战合并策略、空字符串取消与 anyware 校验Graffle 请求头Headers配置实战合并策略、空字符串取消与 anyware 校验 导读 本文以 Graffle 官方示例 transport h后端上一篇CVPR 2023冠军方案QCNet多智能体轨迹预测的终极指南下一篇Ani代码重构案例如何改进遗留代码创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考