怎样在vscode中编写GraphQL查询与API测试【教程】

VS Code 通过 graphql 官方插件（提供语法高亮与基于 schema 的智能补全）和 GraphQL Request 插件（支持在 .graphql 文件中用注释声明 endpoint 并快捷发送请求）实现本地 GraphQL 测试流，需正确配置 schema 路径或地址、严格遵循 variables jsON 格式，并借助 Output 面板、curl 和服务端日志定位请求失败原因。

VS Code 本身不内置 GraphQL 查询执行能力，但通过合理组合插件和配置，可以实现「编写 → 校验 → 发送 → 查看响应」的完整本地测试流。关键不在“装什么”，而在“怎么连通”。

GraphQL 查询语法高亮与自动补全靠什么？

核心依赖 GraphQL 官方插件（GraphQL.vscode-graphql），但它必须配合 schema 才能启用智能提示。没有 schema，它只做基础语法着色。

• 必须在项目根目录或工作区配置 .graphqlrc 或 graphql.config.js，指向有效的 schema（本地文件、http endpoint 或 introspection json）
• 推荐初学者用 schema: "http://localhost:4000/graphql" 直连本地开发服务（需服务已启动且允许 CORS）
• 若用 schema: "./schema.graphql"，确保该文件是合法 SDL 格式（不是 JSON），且路径正确——常见错误是路径写错或文件内容为 introspection 结果 JSON

如何不离开 VS Code 就发送 GraphQL 请求？

靠 GraphQL Request 插件（jimmydief.vscode-graphql-request），它复用 VS Code 内置的 fetch 能力，无需额外服务进程。

• 查询必须写在 .graphql 文件中，且顶部加注释声明 endpoint：

  # GraphQL Request: http://localhost:4000/graphql query GetUser {   user(id: "1") {     name     email   } }

• 光标放在 query 内，按 Ctrl+Alt+R（windows/linux）或 Cmd+Alt+R（macOS）触发请求
• 响应默认显示在右侧面板；如无响应，请检查终端是否报错 NetworkError when attempting to fetch Resource——大概率是 endpoint 地址错、服务未运行，或服务返回了非 2xx 状态码（如 400 带 GraphQL 错误）

为什么 mutation 总是报错“Variable $input is not defined”？

这是变量声明与使用不匹配的典型表现，GraphQL Request 插件要求显式声明变量块，且格式严格。

• 必须在 query 下方紧接 variables 注释块，用 JSON 格式，不能有 trailing comma，不能用单引号：

  # GraphQL Request: http://localhost:4000/graphql mutation CreateUser($input: CreateUserInput!) {   createUser(input: $input) {     id     name   } } # variables {   "input": {     "name": "Alice",     "email": "alice@example.com"   } }

• 变量名（$input）必须与 variables 块中的 key 完全一致，大小写敏感
• 如果 schema 要求非空（!），而 variables 中对应字段为 NULL 或缺失，也会报错——此时应删掉该字段或填有效值

调试失败请求时最该看哪三处？

别急着改 query，先确认链路底层是否通畅。

• 打开 VS Code 的 Output 面板（Ctrl+Shift+U），选择 GraphQL Request 输出通道，看原始 request URL、headers 和 error 堆栈
• 用 curl 手动复现：把 Output 里打印出的 URL 和 JSON body 拷出来，执行 curl -X POST -H "Content-Type: application/json" -d '{"query":"...","variables":{...}}' http://localhost:4000/graphql，排除插件封装干扰
• 检查服务端日志：很多 GraphQL 错误（如 resolver 抛异常）只打在服务端 console，VS Code 插件只收到一个模糊的 500 响应

真正卡住的往往不是语法，而是 schema 加载失败、endpoint 不可达、或 variables 结构与 schema 类型定义不匹配——这些在插件 ui 上几乎不提示，得翻 Output 面板和终端日志。