graphql 中 fetch 发送 post 请求需构造含 query、variables、operationname 的 json 体，设置 content-type: application/json 请求头，并显式指定 method: 'post'；常见问题包括查询字符串非法、变量类型不匹配及未处理非 json 响应。
Fetch 在 GraphQL 中发送 POST 请求，核心是把查询语句（query）、变量（variables）和操作名（operationName）组织成标准 JSON 体，并设置正确的请求头。
构造符合 GraphQL 规范的请求体
GraphQL 服务通常期望 POST 请求的 body 是一个 JSON 对象，至少包含 query 字段。复杂查询常涉及变量和多操作，需按规范补充 variables 和 operationName：
- query：必须是字符串，不能是模板字面量对象或未转义的多行文本；建议用反引号包裹，但最终要作为字符串传入
- variables：必须是可序列化的纯对象（不能含函数、undefined、Date 等），键名需与 query 中的 $var 一一对应
- operationName：当 query 包含多个命名操作（如 query GetUser、mutation UpdatePost）时，必须指定执行哪一个
设置正确的请求头和方法
GraphQL POST 请求不是表单提交，也不是普通文本上传，关键头信息只有两个：
- Content-Type: application/json —— 告诉服务器你发的是 JSON 数据
- 不需要设置 Accept 头（现代 GraphQL 服务默认返回 JSON），也不应加 X-Requested-With 等冗余字段
省略 method: 'POST' 会导致 fetch 默认用 GET，直接报错 —— 这是初学者最常忽略的一点。
完整可运行示例（含错误处理）
以下是一个带变量、命名操作、类型检查和基础错误处理的 fetch 调用：
const query = `
query GetUser($id: ID!, $includePosts: Boolean!) {
user(id: $id) {
name
email
posts @include(if: $includePosts) {
title
publishedAt
}
}
}
`;
const variables = { id: "123", includePosts: true };
const operationName = "GetUser";
fetch("/graphql", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ query, variables, operationName })
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => {
if (data.errors) throw new Error(data.errors[0].message);
console.log(data.data.user);
})
.catch(err => console.error("GraphQL request failed:", err));
常见陷阱与绕过方案
实际开发中容易卡在几个细节上：
-
查询字符串换行/缩进导致解析失败：确保 query 是合法字符串，不要在反引号内意外插入不可见字符；可用
query.trim()预处理 -
变量类型不匹配：比如后端期望
$limit: Int!，却传了字符串"10"，会直接返回 400；前端应提前做简单类型转换（如parseInt()） -
未处理空响应或非 JSON 响应：某些网关错误（如 502、CORS 拒绝）会导致
res.json()抛异常，建议先检查res.headers.get("content-type")?.includes("json")
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
