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

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

相关推荐
程序员爱钓鱼7 小时前
Go语言实战案例 — 工具开发篇:实现一个图片批量压缩工具
后端·google·go
ChinaRainbowSea9 小时前
7. LangChain4j + 记忆缓存详细说明
java·数据库·redis·后端·缓存·langchain·ai编程
舒一笑9 小时前
同步框架与底层消费机制解决方案梳理
后端·程序员
minh_coo9 小时前
Spring框架事件驱动架构核心注解之@EventListener
java·后端·spring·架构·intellij-idea
白初&11 小时前
SpringBoot后端基础案例
java·spring boot·后端
计算机学姐13 小时前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
该用户已不存在14 小时前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
David爱编程14 小时前
深入 Java synchronized 底层:字节码解析与 MonitorEnter 原理全揭秘
java·后端
KimLiu14 小时前
LCODER之Python:使用Django搭建服务端
后端·python·django
再学一点就睡14 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端