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

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

相关推荐
吃海鲜的骆驼13 分钟前
服务异步通讯与RabbitMQ
java·分布式·后端·rabbitmq
m0_7482336415 分钟前
RabbitMQ 进阶
android·前端·后端
m0_7482386324 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
桦说编程26 分钟前
【硬核总结】如何轻松实现只计算一次、惰性求值?良性竞争条件的广泛使用可能超过你的想象!String实际上是可变的?
后端·函数式编程
菜鸟阿达1 小时前
spring boot 2.7 + seata +微服务 降级失败问题修复
spring boot·后端·微服务
清河__2 小时前
【Go】十七、grpc 服务的具体功能编写
开发语言·后端·golang
张声录12 小时前
国密算法Sm2工具类--golang实现版
开发语言·后端·golang
一小路一10 小时前
从0-1学习Mysql第五章: 索引与优化
数据库·后端·学习·mysql·面试
mah66610 小时前
SpringBoot项目连接Oracle视图报错整理
spring boot·后端·oracle
IT学长编程11 小时前
计算机毕业设计 基于SpringBoot的智慧社区管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
java·spring boot·后端·毕业设计·课程设计·论文笔记·1024程序员节