必须用 graphql for vscode + graphql request 插件组合:前者负责 schema 加载与语法支持,后者真正发送请求;apollo graphql 插件仅校验不发请求,graphql language service 已废弃需卸载。

VSCode 里直接发 GraphQL 请求调试 Apollo Client 后端,必须用 GraphQL Request 插件,不是 Apollo GraphQL 插件——后者只校验、不发请求。
装对插件:GraphQL for VSCode + GraphQL Request 缺一不可
GraphQL for VSCode(Prisma 维护)负责 schema 加载、语法高亮、字段补全和跳转定义;GraphQL Request(作者 jimmydief)才是那个能真正发送请求、查看响应的插件。Apollo GraphQL 插件虽名字带“Apollo”,但它专注 client 代码生成与缓存分析,Ctrl+Alt+R 按了也没反应。
- 卸载所有叫
GraphQL Language Service的插件——它已废弃,会破坏 .graphql 文件高亮 - 装完
GraphQL for VSCode后,打开任意.graphql文件,状态栏必须显示GraphQL: connected;不显示就说明 schema 没加载成功,**重启 VSCode 才生效**,重载窗口无效 -
GraphQL Request不依赖后端服务,纯用 VSCode 内置 fetch,但只认.graphql文件里的严格注释格式
schema 必须本地化,远程 endpoint 容易静默失败
调试阶段别直连 http://localhost:4000/graphql。CORS、鉴权拦截、或 introspection 被关闭时,插件加载 schema 会失败,且**不报错、不提示、状态栏也不变**,只默默停在 disconnected 状态。
- 推荐方式:用
apollo client:download-schema或graphql-cli get-schema导出本地schema.json,放在项目根目录 - 在
graphql.config.yml中写明路径:schema: "./schema.json"(注意是正斜杠,Windows 用户别用反斜杠) - 如果坚持用 SDL 格式(
schema.graphql),需额外加extensions: { graphql: { parserOptions: { allowLegacySDL: true } } },否则插件默认不解析
请求注释格式不能错,否则 Ctrl+Alt+R 没响应
GraphQL Request 插件只识别顶部带特定注释的 .graphql 文件,且必须满足三要素:协议明确、URL 可访问、query 在光标范围内。
- 注释必须是第一行,格式为:
# GraphQL Request: http://localhost:4000/graphql(冒号后有空格,URL 后无换行) - URL 必须可被本机访问,若后端跑在 Docker 或 WSL 里,别写
localhost,改用host.docker.internal或宿主机真实 IP - 光标必须落在
query或mutation块内部(比如在{和}之间),不能在注释行或空行 - 响应默认出现在右侧面板;如没弹出,检查 DevTools Console 是否有
fetch failed或 CORS 错误
TypeScript 中 gql 模板字符串没补全?得手动声明类型
VSCode 默认只识别 gql`...` 和 graphql`...` 这两种前缀。如果你用的是 import { gql } from '@apollo/client',插件根本不知道这个 gql 是 GraphQL tag 函数。
- 在项目根目录或
src/@types下新建graphql.d.ts,内容为:declare module '*.graphql' { const content: string; export default content; } declare global { namespace NodeJS { interface Global { gql: typeof import('graphql-tag').default; } } } declare const gql: typeof import('graphql-tag').default; - 同时在 VSCode 设置中加:
"graphql.taggedTemplateLiteralName": ["gql", "graphql"] - 如果补全仍慢,关掉
GraphQL: Enable JavaScript GraphQL Support——它会对每个模板字符串做 AST 解析,schema 大时明显卡顿
最常被忽略的一点:每次改了 graphql.config.yml 或换了 schema.json,都得手动右键任意 .graphql 文件 → “Reload GraphQL Schema”。VSCode 不会自动感知文件变化,也不会在保存时重载——这步漏了,补全和请求都会失效。











