javascript中的GraphQL是什么_如何用它替代REST API-js教程-PHP中文网

javascript中的GraphQL是什么_如何用它替代REST API

紅蓮之龍

发布： 2025-12-13 19:24:07

原创

458人浏览过

GraphQL是一种用于API的查询语言和运行时规范，非JavaScript原生部分，不替代REST但提供更灵活高效的数据获取方式，支持客户端精确指定字段、多资源聚合及强类型schema。

javascript中的graphql是什么_如何用它替代rest api

GraphQL 不是 JavaScript 的一部分，而是一种用于 API 的查询语言和运行时，它可以用 JavaScript（比如在 Node.js 环境中）实现服务端和客户端交互。它不替代 REST，而是提供一种更灵活、更高效的数据获取方式——尤其适合前端需要精确控制返回字段、多资源聚合、或避免多次请求的场景。

GraphQL 是什么：不是协议，是规范

GraphQL 是一套开放规范，定义了客户端如何声明所需数据结构，服务端如何按需响应。它不依赖 HTTP 方法（GET/POST），但通常通过一个 HTTP POST 请求发送查询字符串到单一 endpoint（如 /graphql）。服务端需实现 GraphQL 执行器（如用 graphql-js 库），并定义 schema（类型系统）、resolver（数据获取逻辑）。

关键特点：

客户端决定要什么字段，服务端不预设响应结构
单次请求可获取多个关联资源（比如用户 + 他的帖子 + 每篇帖子的评论）
强类型 schema 提供自动文档、IDE 提示和校验能力
无内置分页、授权、缓存机制，需手动设计或借助工具（如 Apollo Server 插件）

怎么用 JavaScript 实现一个简单 GraphQL 服务

以 Node.js + Express 为例，用 graphql 和 express-graphql 快速搭建：

立即学习“Java免费学习笔记（深入）”；

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

146

查看详情

安装依赖：npm install graphql express-graphql express

定义 schema（用 GraphQL Schema Definition Language）：

const { buildSchema } = require('graphql');
const schema = buildSchema(`
  type User {
    id: ID!
    name: String
    email: String
  }
  type Query {
    user(id: ID!): User
  }
`);

登录后复制

编写 resolver（告诉每个字段怎么取数据）：

const root = {
  user: ({ id }) => {
    // 模拟数据库查找
    return { id, name: '张三', email: 'zhang@example.com' };
  }
};

登录后复制

挂载 GraphQL 中间件：

const express = require('express');
const { graphqlHTTP } = require('express-graphql');

const app = express();
app.use('/graphql', graphqlHTTP({ schema, rootValue: root, graphiql: true }));
app.listen(4000);

登录后复制

启动后访问 http://localhost:4000/graphql 就能用 GraphiQL 调试界面写查询，例如：

{ user(id: "1") { name email } }

登录后复制

如何在前端用 JavaScript 调用 GraphQL

不用框架也能调，核心就是发一个带 query 字符串的 POST 请求：

原生 fetch 示例：

fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    query: `query GetUser($id: ID!) { user(id: $id) { name email } }`,
    variables: { id: '1' }
  })
})
.then(res => res.json())
.then(data => console.log(data.data.user));

登录后复制