GraphQL与REST的核心差异在于请求逻辑组织方式：GraphQL将数据获取逻辑移至前端查询语句，统一通过POST请求发送字符串化查询；REST则依赖URL路径和HTTP方法约定资源行为。
GraphQL 和 REST 在 JavaScript 中的使用差异，不在于“哪个更好”，而在于“请求逻辑怎么组织”——GraphQL 把数据获取逻辑从后端路由转移到前端查询语句里，REST 则靠 URL 路径和 HTTP 方法约定资源行为。
如何发请求：fetch 调用方式不同
REST 通常用 fetch('/api/users/123') 或 axios.get('/api/users/123')，URL 本身携带资源定位信息；GraphQL 统一走一个 endpoint（比如 /graphql），所有请求都用 POST，主体是字符串化的查询语句。
常见错误：直接把 GraphQL 查询当 GET 参数拼在 URL 后，导致 405 或空响应。必须用 fetch 的 method: 'POST' + body: JSON.stringify({ query, variables })。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- REST 请求可直接用
URLSearchParams构建查询参数，GraphQL 必须序列化整个query字段 - GraphQL 响应体固定为
{ data, errors }结构，REST 响应格式完全由后端决定（可能 200 返回数组，也可能 200 返回 { result: [...] }） - 调试时，REST 看 Network Tab 的 URL 和 Response 就能判断问题；GraphQL 需点开 Request Payload 查
query字符串是否拼错字段名
前端数据结构预期：字段由你声明，不是由 API 文档决定
REST 接口返回什么字段，前端只能被动接收（比如 GET /api/posts 总是返回 { id, title, author_name, created_at }）；GraphQL 允许你在请求里写 query { posts { id title } }，后端只返回这两个字段。
这意味着：
- 前端组件不再需要处理“多余字段”或“字段嵌套过深”，但必须自己维护查询语句与 UI 字段的同步（改 UI 字段名时，
query里也得改） - 没有“版本号”概念，但有“字段废弃”风险：如果后端删了
user.avatarUrl，而你的查询还写着它，就会在errors里报错，而不是静默返回null - 联表数据（如文章+作者+评论）不用发多个请求，一个查询就能写完：
posts { title author { name } comments { text } }
错误处理机制：HTTP 状态码 vs GraphQL 错误对象
REST 下，404 表示资源不存在，401 表示未登录，500 表示服务异常——你可以用 response.status 做粗粒度判断；GraphQL 即使后端崩了，HTTP 状态码也常是 200，真正错误藏在响应体的 errors 数组里。
典型现象：调用 GraphQL 后 response.ok === true，但数据没出来，console.log(data) 是 null，必须检查 response.data.errors。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 不要依赖
catch捕获网络错误以外的业务错误；GraphQL 的字段校验失败、权限拒绝、解析错误都会进errors，而非 JS 异常 - 避免写
if (!data) throw new Error('no data')—— 正常情况下data可能部分为空（比如某个嵌套字段被拒绝），但整体响应仍是成功的 - 错误提示需解析
errors[0].message，而不是看 HTTP 状态码
开发工具链：Apollo Client 不是必需，但省掉大量样板代码
纯 fetch 调用 GraphQL 完全可行，但很快会遇到缓存、变量注入、类型提示、错误重试等问题。Apollo Client 提供 useQuery、useMutation 等 Hook，自动管理 loading/error/data 状态，且支持本地缓存（比如两次请求相同 query，第二次可能直接读内存）。
而 REST 场景下，很多人直接手写 useState + useEffect + fetch，或用 SWR/React Query——它们也支持 GraphQL，但 Apollo 对 GraphQL 协议的支持更原生（比如自动提取 __typename 用于缓存键生成）。
注意点：
- Apollo 默认开启缓存，可能导致 UI 没更新（比如 mutation 后没触发 refetch）；REST 工具如 React Query 默认不缓存 POST 请求
-
gql模板字符串标签（来自@apollo/client）只是语法糖，本质还是字符串，但它支持 IDE 插件做字段名自动补全和验证 - 如果你只用 GraphQL 做一次性查询，不关心缓存和状态同步，硬上 Apollo 反而增加 bundle 体积
最易被忽略的一点：GraphQL 查询语句是运行时拼接的字符串，不是 JS 对象——少一个 } 或字段名大小写错，不会在编译时报错，而是在发请求后才在 errors 里暴露。上线前务必用真实 schema 校验查询，别只靠眼力检查。
