GraphQL是一种API查询语言和运行时，非JavaScript原生特性；它通过声明式查询精确获取数据，解决REST的过度/不足获取问题，支持变量、片段、类型安全及客户端缓存。
GraphQL 不是 JavaScript 的一部分，而是一种用于 API 的查询语言和运行时，JavaScript 是最常用的实现语言之一。它让你能精确获取所需数据，避免传统 REST API 中常见的过度获取或获取不足问题。
GraphQL 查询的基本结构
一个 GraphQL 查询是一个字符串，描述你想要的数据结构。服务器按这个结构返回 JSON 数据，字段名和嵌套层级与查询完全一致。
- 用 query 关键字定义查询操作（也可省略，当它是唯一操作时）
- 用大括号 {} 包裹要请求的字段，支持嵌套对象和字段别名
- 可以传入变量（如 ID、分页参数），通过 $variableName 引用
- 支持 fragments 复用字段集，适合多处需要相同子字段的场景
在 JavaScript 中发起 GraphQL 请求
最常见方式是用 fetch 发送 POST 请求到 GraphQL 服务端点（通常是 /graphql），请求体包含 query 字符串和可选变量。
例如：
立即学习“Java免费学习笔记（深入）”；
const query = `
query GetUser($id: ID!) {
user(id: $id) {
name
email
posts(first: 2) {
title
publishedAt
}
}
}
`;
fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query,
variables: { id: '123' }
})
})
.then(res => res.json())
.then(data => console.log(data.data.user));
使用客户端库简化操作
手动写 fetch 容易出错且难维护。主流方案是用封装好的客户端，比如：
- Apollo Client：功能完整，支持缓存、本地状态、自动更新 UI
- URQL：轻量、可扩展，适合中小型项目
- GraphQL Codegen + TypeScript：自动生成类型安全的 hooks 和接口，减少手写错误
以 Apollo 为例，定义查询后，用 useQuery Hook 即可自动处理加载、错误、数据响应：
import { gql, useQuery } from '@apollo/client';
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
name
avatarUrl
}
}
`;
function UserProfile({ userId }) {
const { loading, error, data } = useQuery(GET_USER, {
variables: { id: userId }
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return <p>{data.user.name}</p>;
}
注意 schema 和类型安全
GraphQL 的强项之一是服务端提供统一的 schema（类型定义），描述所有可用查询、字段、输入类型和关系。前端可通过 introspection 获取 schema，或配合工具生成 TypeScript 类型。
实际开发中建议：
- 用 GraphQL Playground 或 Altair 测试查询，实时看 schema 和示例响应
- 接入 GraphQL Code Generator，把 schema 转成 JS/TS 类型和请求函数
- 服务端需明确设计 schema，避免过度暴露敏感字段或嵌套过深导致性能问题
