必须用本地 schema.graphql 文件配置,远程 endpoint 容易静默失败;发送查询需 graphql request 插件,非 graphql for vscode 自带功能;需在 graphql.config.js 中显式指定 schema 路径,支持数组、sdl 格式,且 windows 须用正斜杠;vscode 需手动设语言模式为 graphql,js/ts 中 gql 模板字面量需正确命名与格式;多 endpoint 项目应通过 projects 分组隔离 schema 与 documents;修改 schema 后必须重启 vscode 才生效。

必须用本地 schema.graphql 文件配置,远程 endpoint 容易静默失败;发送查询要靠 GraphQL Request 插件,不是 GraphQL for VSCode 自带的功能。
怎么让 VSCode 读到你的 Schema 文件
插件不会自动扫描项目里叫 schema.graphql 的文件——你得在 graphql.config.js(或 graphql.config.yml)里显式写死路径:
-
schema字段值必须是相对于该配置文件所在目录的路径,比如配置文件在项目根目录,而 schema 在src/schema.graphql,就写./src/schema.graphql;./可省略,但../或绝对路径会失效 - Windows 用户别用反斜杠:
src\schema.graphql是错的,得写src/schema.graphql - 如果 schema 拆成多个文件(如
types.graphql+queries.graphql),schema必须是数组:["schema/types.graphql", "schema/queries.graphql"] - 文件内容必须是合法 SDL(Schema Definition Language),不是 introspection JSON;用
graphql-introspection工具导出时加--format sdl
为什么写了 schemaPath 还没补全
常见原因不是配置错,而是 VSCode 没把当前文件当 GraphQL 上下文处理:
- 打开任意
.graphql文件,右下角语言模式必须显示GraphQL,不是Plain Text;点它手动选一次,或在settings.json加:"files.associations": {"*.graphql": "graphql", "*.gql": "graphql"} - JS/TS 里用
gql模板字面量时,插件默认只认gql标签名;用了graphql或query,就得配"graphql.taggedTemplateLiteralName": ["gql", "graphql"] -
gql模板必须单独成行、不能拼接:const q = gql`...` + ''或{ query: gql`...` }会让插件直接忽略 - 装错插件:只有
GraphQL for VSCode(Prisma 出品)支持 Schema 感知;GraphQL Language Service等已归档,不生效
如何在编辑器里直接发 GraphQL 请求
GraphQL for VSCode 不负责发请求,得靠 GraphQL Request 插件(作者 jimmydief):
- 查询必须写在
.graphql文件中,顶部加注释声明 endpoint:# GraphQL Request: http://localhost:4000/graphql - 光标放在
query或mutation块内,按Ctrl+Alt+R(Win/Linux)或Cmd+Alt+R(macOS)触发 - 变量要写成合法 JSON 格式,且紧贴在 query 下方,用
# variables注释标记:# variables { "id": "1" } - 响应失败时看 Output 面板 → 选
GraphQL Request,常见报错:NetworkError when attempting to fetch resource表示地址错、服务没起、或返回非 2xx 状态码(比如 400 带 GraphQL 错误体)
多 endpoint 项目怎么切 Schema
一个前端连用户服务和订单服务,不能共用一个 schema 配置,否则补全是乱的:
- 用
graphql.config.js的projects分组,每个 project 对应一个 endpoint 和一份 schema: projects: { users: { schema: './schema/users.graphql', documents: 'src/users/**/*.graphql' }, orders: { schema: './schema/orders.graphql', documents: 'src/orders/**/*.graphql' } }- VSCode 默认加载第一个 project;切换靠右下角状态栏点击
GraphQL: users→ 选另一个 - 注意:不同 project 的
documents路径要严格隔离,否则文件被多个 schema 同时匹配,类型推导会冲突
最容易被忽略的是:每次改了 schema.graphql 文件,必须手动重启 VSCode 才能让 Language Server 重新加载——重载窗口(Developer: Reload Window)不够,它不触发 schema 重解析。











