拓冰网站定制 
VS Code 内联执行 GraphQLvscode-graphql-execution 扩展的配置指南与实现原理【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiqlGraphQL 开发者在编写客户端代码时经常需要在编辑器里快速验证一段查询能否跑通。本文以 GraphiQL 生态中的vscode-graphql-execution扩展为对象讲解如何在.ts/.tsx、.js/.jsx以及.graphql/.gql/.graphqls文件中通过 CodeLens 一键执行 GraphQL 操作query / mutation / subscription并深入剖析其基于graphql-config、urql 与 graphql-ws 的底层实现帮助你完成从配置文件编写到扩展行为定制的完整落地。扩展定位在代码内联执行 GraphQL 操作vscode-graphql-execution是 GraphiQL 仓库 中一个独立的 VS Code 扩展包当前版本 0.3.7见 package.json它的核心能力是为代码中内联出现的 GraphQL 操作提供独立的执行支持覆盖以下文件类型.ts/.tsx.js/.jsx.graphql、.gql或.graphqls文件从源码看扩展通过languages.registerCodeLensProvider为javascript、typescript、javascriptreact、typescriptreact、graphql五种语言注册了 CodeLens 提供器见 src/extension.ts并在 package.json 中声明了激活事件只要工作区包含**/.graphqlrc、.graphqlrc.{json,yaml,yml,js,ts,toml}、graphql.config.{json,yaml,yml,js,ts,toml}或package.json即可触发激活。工作机制从 CodeLens 到结果面板的四步流程官方 README 给出了扩展的完整工作流程四个步骤环环相扣CodeLens 出现所有操作operation上方会出现一个 CodeLens点击即开始执行该操作。变量录入如果操作中声明了变量variables会弹出一个对话框依次提示输入这些变量的值。结果展示执行完成后结果或网络错误会呈现在结果面板中。提前退出如果没有配置任何端点endpoints扩展会提前退出并提示你进行配置。对应到源码这四步分别由以下组件承接CodeLens 提供器src/providers/exec-codelens.ts调用SourceHelper.extractAllTemplateLiterals从当前文档提取所有 GraphQL 模板字面量并为每个操作生成标题为Execute ${operation}例如 Execute Query的 CodeLens点击后触发vscode-graphql-execution.contentProvider命令。内容提供器src/providers/exec-content.ts收到命令后创建一个名为 GraphQL Execution Result 的 Webview 面板ViewColumn.Two即编辑器第二列并通过getVariablesFromUser用window.showInputBox逐个向用户询问变量值L54-L76。结果渲染执行结果通过updateCallback以pre包裹的 JSON 追加到 Webview 面板中订阅subscription结果追加在顶部普通结果追加在底部L205-L213。端点检查loadEndpoint会先读取配置中的endpoints为空时输出 No Endpoints configured 类错误并返回null详见下文配置形态一节。一个值得注意的细节扩展监听workspace.onDidSaveTextDocument当你保存graphql.config.*或graphqlrc相关配置文件时会自动重新加载配置无需重启 VS Code见 src/extension.ts。配置扩展graphql-config 的三种合法形态扩展通过graphql-config的loadConfig加载项目配置见 src/providers/exec-content.ts支持常见的.graphqlrc.{json,yaml,yml,js,ts,toml}或graphql.config.*文件。你的配置文件必须包含 schema-as-url 或 endpoints 配置之一下面三种写法都是合法的形态一仅 schema 指向 URL单端点简化写法schema: https://localhost:3000/graphql形态二schema 文件 endpoints 扩展schema: schema.graphql extensions: endpoints: default: url: https://localhost:3000/graphql形态三多项目projects结构projects: app: schema: schema.graphql extensions: endpoints: default: url: https://localhost:3000/graphql端点的完整字段与多端点选择从 src/helpers/extensions.ts 的Endpoint接口可以看到除了url之外endpoints 扩展还支持更多字段字段类型说明urlstring必填GraphQL HTTP 端点地址headersRecordstring, string \| string[]随请求发送的 HTTP 头introspectboolean是否进行 introspectionschema 探测subscription.urlstring独立的订阅端点地址subscription.connectionParamsRecordstring, string \| undefined订阅建立时的连接参数如鉴权 token当配置了多个端点时getEndpointName会通过window.showQuickPick弹出快速选择列表让你挑选目标端点src/providers/exec-content.ts若只有一个default端点则直接使用无需选择。缺少 endpoints 时的回退行为loadEndpoint的实现揭示了一个实用的回退逻辑L134-L179如果配置中没有extensions.endpoints扩展会尝试把schema当作端点使用——只要 schema 的值匹配^https?:\/\//正则validUrlFromSchema判断就将其作为default端点 URL如果 schema 既不是 URL、也没有 endpoints才会报告 No Endpoints configured 并提前退出。这正是 README 所说要么 schema-as-url要么 endpoints的原因。进阶配置关闭 CodeLens 与自签名证书扩展在package.json的contributes.configuration中声明了三个可配置项可通过 VS Code 的settings.json或user.json调整配置项类型默认值作用vscode-graphql-execution.showExecCodelensbooleantrue是否显示内联执行操作的 CodeLensvscode-graphql-execution.rejectUnauthorizedbooleantrue对无效 SSL 证书的请求是否失败即是否拒绝未授权证书vscode-graphql-execution.debugboolean / nullfalse是否输出调试日志关闭 CodeLens{ ...: ..., vscode-graphql-execution.showExecCodelens: false }允许自签名证书针对本地开发时使用自签名 HTTPS 证书的服务端可以关闭证书校验默认关闭该校验豁免即默认true表示拒绝未授权证书{ vscode-graphql-execution.rejectUnauthorized: true }该设置的实际效果在 src/helpers/network.ts 中落地网络层通过new Agent({ rejectUnauthorized })构造 Node.js HTTPS Agent并将其注入到 fetch 请求的fetchOptions.agent中仅当端点协议为https:时生效。从源码可以看出网络层实际读取的是vscode-graphql命名空间下的同名配置项workspace.getConfiguration(vscode-graphql)与 README 中记录的vscode-graphql-execution.rejectUnauthorized存在命名空间上的不一致配置时建议同时在两个命名空间下设置该项以保证在 vscode-graphql 与 execution 扩展之间行为一致。源码级原理内联操作的提取、校验与网络执行为了让文章不止停留在怎么配这里结合源码梳理扩展的内部实现机制。操作提取模板字面量与 GraphQL 文件SourceHelper.extractAllTemplateLiteralssrc/helpers/source.ts负责从文档中找出可执行的 GraphQL 操作支持两种来源GraphQL 文件languageId graphql时直接对全文调用graphql的parse解析并过滤出OperationDefinition节点。JS/TS 文件中的模板字面量对标签为gql、graphql以及/* GraphQL */注释标记的模板字符串逐一匹配正则tag \s*\([\s\S]?)并**跳过包含${...} 模板插值的操作**当前版本尚不支持带运行时插值的查询。提取时每个操作会被单独打印print为独立的文档并记录其在源码中的position用于 CodeLens 的定位展示。变量校验与类型转换当操作声明了变量时扩展会对用户输入做先校验、后转换两步处理src/helpers/source.ts变量类型校验规则转换结果IntparseInt可解析parseInt(value, 10)FloatparseFloat可解析parseFloat(value)Boolean必须为true或falseBoolean(value)String/ID/Enum非空字符串原样返回List列表 / 自定义类型可被JSON.parse解析JSON 解析为对象/数组校验失败时会在输入框下方提示${value} is not a valid ${type}之类的错误信息。Fragment 依赖自动补全如果操作中使用了未在当前文件内定义的 fragment扩展会通过projectConfig.getDocuments()扫描项目内所有文档收集所有FragmentDefinition再借助getFragmentDependenciesForAST递归解析FragmentSpread依赖链把缺失的 fragment 定义自动拼接到待执行查询之前见 src/helpers/network.ts。这意味着跨文件复用的 fragment 也能直接内联执行。网络层HTTP 查询与 WebSocket 订阅NetworkHelper.executeOperation会先visit操作 AST 判断操作类型然后针对每种类型构造不同的 urql 客户端src/helpers/network.tsquery / mutation走cacheExchange fetchExchange的标准 HTTP 链路fetch 优先使用 Node 全局 fetch否则回退到whatwg-node/fetch。subscription将端点 URL 的http前缀替换为ws得到 WebSocket 地址通过graphql-ws建立订阅连接connectionAckWaitTimeout: 3000再以subscriptionExchange注入 urql 的 exchanges 管道使用 wonka 的pipe/subscribe持续接收推送结果。所有执行路径含出错场景都会同步写入名为 GraphQL Operation Execution 的输出通道Output Channel便于排查问题结果面板中的错误信息则来自 urql 的CombinedError区分graphQLErrors服务端错误与networkError网络错误分别呈现。常见问题与排查建议结合 README 与源码整理出几个高频问题的处理路径点击 CodeLens 无反应或提示没有端点检查graphql.config.*/.graphqlrc.*是否存在并确认其中包含schema: url或extensions.endpoints保存配置文件后扩展会自动重载。变量输入报 is not a valid ...对照上文的校验规则检查类型例如Boolean必须输入true/false列表与对象类型需要输入合法的 JSON。订阅无推送确认endpoint.url可被http→ws替换且服务端支持graphql-ws协议connectionAckWaitTimeout为 3 秒。自签名证书被拒按上文设置rejectUnauthorized: false并注意命名空间差异。需要调试将vscode-graphql-execution.debug设为true开启调试日志并通过命令面板执行 GraphQL Exec: Show output channel 查看输出通道。结语vscode-graphql-execution以极轻的方式把编辑器内执行 GraphQL这个能力带到了日常编码流程中CodeLens 触发、变量交互录入、fragment 自动补全、HTTP/WebSocket 双协议执行全部由 graphql-config 生态统一驱动。如果你需要更完整的语言服务能力跳转、补全、诊断可以进一步了解同仓库的 vscode-graphql 扩展而本文所讲的 execution 扩展正是这套生态中就近执行验证的快捷一环。【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 VS Code 内联执行 GraphQL：vscode-graphql-execution 扩展的配置指南与实现原理
VS Code 内联执行 GraphQLvscode-graphql-execution 扩展的配置指南与实现原理【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiqlGraphQL 开发者在编写客户端代码时经常需要在编辑器里快速验证一段查询能否跑通。本文以 GraphiQL 生态中的vscode-graphql-execution扩展为对象讲解如何在.ts/.tsx、.js/.jsx以及.graphql/.gql/.graphqls文件中通过 CodeLens 一键执行 GraphQL 操作query / mutation / subscription并深入剖析其基于graphql-config、urql 与 graphql-ws 的底层实现帮助你完成从配置文件编写到扩展行为定制的完整落地。扩展定位在代码内联执行 GraphQL 操作vscode-graphql-execution是 GraphiQL 仓库 中一个独立的 VS Code 扩展包当前版本 0.3.7见 package.json它的核心能力是为代码中内联出现的 GraphQL 操作提供独立的执行支持覆盖以下文件类型.ts/.tsx.js/.jsx.graphql、.gql或.graphqls文件从源码看扩展通过languages.registerCodeLensProvider为javascript、typescript、javascriptreact、typescriptreact、graphql五种语言注册了 CodeLens 提供器见 src/extension.ts并在 package.json 中声明了激活事件只要工作区包含**/.graphqlrc、.graphqlrc.{json,yaml,yml,js,ts,toml}、graphql.config.{json,yaml,yml,js,ts,toml}或package.json即可触发激活。工作机制从 CodeLens 到结果面板的四步流程官方 README 给出了扩展的完整工作流程四个步骤环环相扣CodeLens 出现所有操作operation上方会出现一个 CodeLens点击即开始执行该操作。变量录入如果操作中声明了变量variables会弹出一个对话框依次提示输入这些变量的值。结果展示执行完成后结果或网络错误会呈现在结果面板中。提前退出如果没有配置任何端点endpoints扩展会提前退出并提示你进行配置。对应到源码这四步分别由以下组件承接CodeLens 提供器src/providers/exec-codelens.ts调用SourceHelper.extractAllTemplateLiterals从当前文档提取所有 GraphQL 模板字面量并为每个操作生成标题为Execute ${operation}例如 Execute Query的 CodeLens点击后触发vscode-graphql-execution.contentProvider命令。内容提供器src/providers/exec-content.ts收到命令后创建一个名为 GraphQL Execution Result 的 Webview 面板ViewColumn.Two即编辑器第二列并通过getVariablesFromUser用window.showInputBox逐个向用户询问变量值L54-L76。结果渲染执行结果通过updateCallback以pre包裹的 JSON 追加到 Webview 面板中订阅subscription结果追加在顶部普通结果追加在底部L205-L213。端点检查loadEndpoint会先读取配置中的endpoints为空时输出 No Endpoints configured 类错误并返回null详见下文配置形态一节。一个值得注意的细节扩展监听workspace.onDidSaveTextDocument当你保存graphql.config.*或graphqlrc相关配置文件时会自动重新加载配置无需重启 VS Code见 src/extension.ts。配置扩展graphql-config 的三种合法形态扩展通过graphql-config的loadConfig加载项目配置见 src/providers/exec-content.ts支持常见的.graphqlrc.{json,yaml,yml,js,ts,toml}或graphql.config.*文件。你的配置文件必须包含 schema-as-url 或 endpoints 配置之一下面三种写法都是合法的形态一仅 schema 指向 URL单端点简化写法schema: https://localhost:3000/graphql形态二schema 文件 endpoints 扩展schema: schema.graphql extensions: endpoints: default: url: https://localhost:3000/graphql形态三多项目projects结构projects: app: schema: schema.graphql extensions: endpoints: default: url: https://localhost:3000/graphql端点的完整字段与多端点选择从 src/helpers/extensions.ts 的Endpoint接口可以看到除了url之外endpoints 扩展还支持更多字段字段类型说明urlstring必填GraphQL HTTP 端点地址headersRecordstring, string \| string[]随请求发送的 HTTP 头introspectboolean是否进行 introspectionschema 探测subscription.urlstring独立的订阅端点地址subscription.connectionParamsRecordstring, string \| undefined订阅建立时的连接参数如鉴权 token当配置了多个端点时getEndpointName会通过window.showQuickPick弹出快速选择列表让你挑选目标端点src/providers/exec-content.ts若只有一个default端点则直接使用无需选择。缺少 endpoints 时的回退行为loadEndpoint的实现揭示了一个实用的回退逻辑L134-L179如果配置中没有extensions.endpoints扩展会尝试把schema当作端点使用——只要 schema 的值匹配^https?:\/\//正则validUrlFromSchema判断就将其作为default端点 URL如果 schema 既不是 URL、也没有 endpoints才会报告 No Endpoints configured 并提前退出。这正是 README 所说要么 schema-as-url要么 endpoints的原因。进阶配置关闭 CodeLens 与自签名证书扩展在package.json的contributes.configuration中声明了三个可配置项可通过 VS Code 的settings.json或user.json调整配置项类型默认值作用vscode-graphql-execution.showExecCodelensbooleantrue是否显示内联执行操作的 CodeLensvscode-graphql-execution.rejectUnauthorizedbooleantrue对无效 SSL 证书的请求是否失败即是否拒绝未授权证书vscode-graphql-execution.debugboolean / nullfalse是否输出调试日志关闭 CodeLens{ ...: ..., vscode-graphql-execution.showExecCodelens: false }允许自签名证书针对本地开发时使用自签名 HTTPS 证书的服务端可以关闭证书校验默认关闭该校验豁免即默认true表示拒绝未授权证书{ vscode-graphql-execution.rejectUnauthorized: true }该设置的实际效果在 src/helpers/network.ts 中落地网络层通过new Agent({ rejectUnauthorized })构造 Node.js HTTPS Agent并将其注入到 fetch 请求的fetchOptions.agent中仅当端点协议为https:时生效。从源码可以看出网络层实际读取的是vscode-graphql命名空间下的同名配置项workspace.getConfiguration(vscode-graphql)与 README 中记录的vscode-graphql-execution.rejectUnauthorized存在命名空间上的不一致配置时建议同时在两个命名空间下设置该项以保证在 vscode-graphql 与 execution 扩展之间行为一致。源码级原理内联操作的提取、校验与网络执行为了让文章不止停留在怎么配这里结合源码梳理扩展的内部实现机制。操作提取模板字面量与 GraphQL 文件SourceHelper.extractAllTemplateLiteralssrc/helpers/source.ts负责从文档中找出可执行的 GraphQL 操作支持两种来源GraphQL 文件languageId graphql时直接对全文调用graphql的parse解析并过滤出OperationDefinition节点。JS/TS 文件中的模板字面量对标签为gql、graphql以及/* GraphQL */注释标记的模板字符串逐一匹配正则tag \s*\([\s\S]?)并**跳过包含${...} 模板插值的操作**当前版本尚不支持带运行时插值的查询。提取时每个操作会被单独打印print为独立的文档并记录其在源码中的position用于 CodeLens 的定位展示。变量校验与类型转换当操作声明了变量时扩展会对用户输入做先校验、后转换两步处理src/helpers/source.ts变量类型校验规则转换结果IntparseInt可解析parseInt(value, 10)FloatparseFloat可解析parseFloat(value)Boolean必须为true或falseBoolean(value)String/ID/Enum非空字符串原样返回List列表 / 自定义类型可被JSON.parse解析JSON 解析为对象/数组校验失败时会在输入框下方提示${value} is not a valid ${type}之类的错误信息。Fragment 依赖自动补全如果操作中使用了未在当前文件内定义的 fragment扩展会通过projectConfig.getDocuments()扫描项目内所有文档收集所有FragmentDefinition再借助getFragmentDependenciesForAST递归解析FragmentSpread依赖链把缺失的 fragment 定义自动拼接到待执行查询之前见 src/helpers/network.ts。这意味着跨文件复用的 fragment 也能直接内联执行。网络层HTTP 查询与 WebSocket 订阅NetworkHelper.executeOperation会先visit操作 AST 判断操作类型然后针对每种类型构造不同的 urql 客户端src/helpers/network.tsquery / mutation走cacheExchange fetchExchange的标准 HTTP 链路fetch 优先使用 Node 全局 fetch否则回退到whatwg-node/fetch。subscription将端点 URL 的http前缀替换为ws得到 WebSocket 地址通过graphql-ws建立订阅连接connectionAckWaitTimeout: 3000再以subscriptionExchange注入 urql 的 exchanges 管道使用 wonka 的pipe/subscribe持续接收推送结果。所有执行路径含出错场景都会同步写入名为 GraphQL Operation Execution 的输出通道Output Channel便于排查问题结果面板中的错误信息则来自 urql 的CombinedError区分graphQLErrors服务端错误与networkError网络错误分别呈现。常见问题与排查建议结合 README 与源码整理出几个高频问题的处理路径点击 CodeLens 无反应或提示没有端点检查graphql.config.*/.graphqlrc.*是否存在并确认其中包含schema: url或extensions.endpoints保存配置文件后扩展会自动重载。变量输入报 is not a valid ...对照上文的校验规则检查类型例如Boolean必须输入true/false列表与对象类型需要输入合法的 JSON。订阅无推送确认endpoint.url可被http→ws替换且服务端支持graphql-ws协议connectionAckWaitTimeout为 3 秒。自签名证书被拒按上文设置rejectUnauthorized: false并注意命名空间差异。需要调试将vscode-graphql-execution.debug设为true开启调试日志并通过命令面板执行 GraphQL Exec: Show output channel 查看输出通道。结语vscode-graphql-execution以极轻的方式把编辑器内执行 GraphQL这个能力带到了日常编码流程中CodeLens 触发、变量交互录入、fragment 自动补全、HTTP/WebSocket 双协议执行全部由 graphql-config 生态统一驱动。如果你需要更完整的语言服务能力跳转、补全、诊断可以进一步了解同仓库的 vscode-graphql 扩展而本文所讲的 execution 扩展正是这套生态中就近执行验证的快捷一环。【免费下载链接】graphiqlGraphiQL the GraphQL LSP Reference Ecosystem for building browser IDE tools.项目地址: https://gitcode.com/GitHub_Trending/gr/graphiql创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考