GraphQL(4):GraphQL clients访问接口

下面演示在GraphQL clients访问GraphQL 接口

1 修改baseType.js

添加可供用户访问的静态资源路径

代码如下:

复制代码
const express = require('express');
const {buildSchema} = require('graphql');
const grapqlHTTP = require('express-graphql').graphqlHTTP;
// 定义schema,查询和类型
const schema = buildSchema(`
    type Account {
        name: String
        age: Int
        sex: String
        department: String
        salary(city: String): Int
    }
    type Query {
        getClassMates(classNo: Int!): [String]
        account(username: String): Account
    }
`)
// 定义查询对应的处理器
const root = {
    getClassMates({ classNo}) {
        const obj = {
            31: ['张三', '李四', '王五'],
            61: ['张大三', '李大四', '王大五']
        }
        return obj[classNo];
    },
    account({ username}) {
        const name = username;
        const sex = 'man';
        const age = 18;
        const department = '开发部';
        const salary = ({city}) => {
            if(city === "北京" || city == "上海" || city == "广州" || city == "深圳") {
                return 10000;
            }
            return 3000;
        }
        return {
            name,
            sex,
            age,
            department,
            salary
        }
    }
}

const app = express();

app.use('/graphql', grapqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true
}))

// 公开文件夹,供用户访问静态资源
app.use(express.static('public'))

app.listen(3000);

2 编写index.html页面

设置参数

设置传入的数值

完整代码如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="getData()">获取数据</button>
</body>
<script>
    function getData() {
        const query = `
        query Account($username: String, $city: String) {
            account(username: $username) {
                name
                age
                sex
                salary(city: $city)
            }
        }
        `

        const variables = {username: '李大四', city: '深圳'}

        fetch('/graphql', {
            method: "POST",
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                query: query,
                variables: variables
            })
        }).then(res => res.json)
        .then(json => {
            console.log(data);
        })
    }
</script>
</html>

启动服务:

复制代码
node baseType.js

访问地址后,点击获取数据按钮,效果如下:

相关推荐
你的人类朋友14 分钟前
什么是OpenSSL
后端·安全·程序员
bobz96529 分钟前
mcp 直接操作浏览器
后端
前端小张同学3 小时前
服务器部署 gitlab 占用空间太大怎么办,优化思路。
后端
databook3 小时前
Manim实现闪光轨迹特效
后端·python·动效
武子康4 小时前
大数据-98 Spark 从 DStream 到 Structured Streaming:Spark 实时计算的演进
大数据·后端·spark
该用户已不存在4 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net
文心快码BaiduComate4 小时前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
neoooo4 小时前
🌐 Cloudflare Tunnel vs ZeroTier:两个世界的内网穿透哲学
后端
涡能增压发动积4 小时前
当你不了解“异步”时请慎用“异步”——记一次生产环境故障排查之旅
后端
文心快码BaiduComate4 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序