VSCode中GraphQL运行：配置Playground插件实现接口即时调用

先说说 VSCode 里那些让人头疼的 GraphQL 操作。说实话，编辑器默认是不带 Playground 功能的，但如果你把插件配对了，就能直接在编辑器里发查询、看响应、调变量和 headers——体验上跟原生 Playground 没什么两样，关键是省去了来回切换窗口的麻烦。

那么，到底该装哪个插件才能跑查询呢？关键是得装对版本。你必须安装 GraphQL for VSCode（作者是 Kumar Harsh），而不是那些只做语法高亮的“GraphQL”或“GraphQL Language Service”插件，后者早就归档了，根本不具备执行能力。装完之后，打开一个 .graphql 文件，右下角必须出现 GraphQL: connected 的提示——没出现的话，就说明 schema 没连上，所有运行功能都不可用。

配置 graphql.config.yml 让查询能真正发出

插件的运行全依赖这个配置文件，它告诉插件 endpoint 在哪、要不要带 token、以及是否启用 introspection。但这里有个常见的坑：很多人直接写 schema: http://localhost:4000/graphql 就以为万事大吉了，实际上，运行查询时默认用的是 extensions.endpoints.default.url，而不是 schema 字段。换句话说，schema 只负责补全和校验，对查询执行没影响。你必须显式声明 extensions.endpoints.default.url，否则点击“Run Query”就会报 Cannot resolve endpoint。需要认证时，headers 必须写成对象格式，比如 Authorization: "Bearer xyz"，不能用字符串拼接。另外，introspect 设置为 true 可以自动拉取 schema（仅限开发环境），生产环境建议关掉。

一个可用的示例配置是这样的：

schema: ./schema.graphqlextensions:  endpoints:    default:      url: http://localhost:4000/graphql      headers:        Authorization: "Bearer abc123"      introspect: true

运行查询时变量和 headers 怎么填

操作其实很简单：在命令面板（Ctrl+Shift+P）里搜索 GraphQL: Run Query，或者在 .graphql 文件里右键选择“Run Query in GraphQL Playground”。弹出来的面板上就能填变量和 headers。但有几个细节要注意：

• 变量必须是合法的 JSON 格式，比如 {"id": 123}，不能是 JS 对象或带单引号的字符串
• headers 只接受键值对，Content-Type 会被自动设为 application/json，手动覆盖反而可能出错
• 如果后端要求 X-Api-Key 这类自定义头，必须在 config 里预设好，运行时无法临时添加
• 响应体里如果出现 locations 字段（比如 "locations": [{"line": 3, "column": 12}]），说明是 GraphQL 层的报错，不是网络问题

为什么点“Run”没反应或报 400/401

多数情况下，问题不在插件本身，而是 endpoint 不响应或返回了非标准格式。比如：后端关闭了 introspection，schema 加载失败并不会阻断查询运行，但 extensions.endpoints 配置错误会导致静默失败。CORS 被拦截时，浏览器控制台会有提示，但 VSCode 插件里只显示空响应或 Network error。另外，某些框架（如 NestJS、Lighthouse）默认把 GraphQL endpoint 放在 /graphql，但实际路径可能是 /api/graphql，路径少一段就会 404。用 Docker 或 WSL 开发时，localhost 指向的是容器内部，需要改用 host.docker.internal 或宿主机的真实 IP。

最稳妥的方式是先用 curl 测试一下 endpoint 能否返回有效的 JSON：curl -X POST http://localhost:4000/graphql -H "Content-Type: application/json" -d '{"query":"{__schema{types{name}}"}'。如果能跑通，VSCode 那边才可能正常工作。