GraphQL 只需要一次请求就完成了原本需要 6-7 次请求才能获取的完整数据
这就是 GraphQL 最大的优势:减少网络请求次数,精确获取所需数据
安装 GraphQL (Node.js 环境)
npm install graphql express-graphql express
示例①GraphQL
javascript
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
// 1. 定义 Schema(数据结构)
const schema = buildSchema(`
type User {
id: ID!
name: String!
age: Int
}
type Query {
hello: String
user(id: ID!): User
users: [User]
}
`);
// 2. 模拟数据
const users = [
{ id: '1', name: '张三', age: 25 },
{ id: '2', name: '李四', age: 30 },
{ id: '3', name: '王五', age: 28 }
];
// 3. 定义 resolver(数据获取逻辑)
const root = {
hello: () => 'Hello GraphQL!',
user: ({ id }) => {
return users.find(user => user.id === id);
},
users: () => users
};
// 4. 创建服务器
const app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true // 开启图形化界面
}));
app.listen(4000, () => {
console.log('GraphQL 服务器运行在 http://localhost:4000/graphql');
});
运行服务器
javascript
node server.js
然后在浏览器访问:http://localhost:4000/graphql
使用 GraphQL(在 GraphiQL 界面中)
当你的 GraphQL 收到这个查询时:
javascript
uery {
user(id: "2") {
name
age
}
}
背后发生了什么:
GraphQL 看到你要查询 user(id: "2")
它找到对应的 resolver:user: ({ id }) => {...}
它调用这个函数,把 id: "2" 作为参数传进去
函数执行:users.find(user => user.id === "2")
找到 id 为 "2" 的用户:{ id: '2', name: '李四', age: 30 }
返回给客户端
示例②GraphQL
123