graphql的学习（一）

最新推荐文章于 2022-12-03 18:08:49 发布

Amnesia�

最新推荐文章于 2022-12-03 18:08:49 发布

阅读量241

点赞数

文章标签：接口

本文链接：https://blog.csdn.net/qq_44242030/article/details/106384477

版权

graphQl学习

介绍

● GraphQL是Facebook开发的一 -种数据查询语言，并于2015年
公开发布。它是REST API的替代品

● GraphQL既是- -种用于API的查询语言也是一-个满足你数据查
询的运行时。GraphQL 对你的API中的数据提供了一套易于理
解的完整描述，使得客户端能够准确地获得它需要的数据，而且
没有任何冗余，也让API更容易地随着时间推移而演进。

● 官网: https://graphql.org/

● 中文网: http://graphql.cn/

● 特点:

1.请求需要的数据，不多不少
例如: account中有name, lage, sex, department等。可以只取得需要的字段。
2.获取多个资源，只用-个请求
3.描述所有可能类型的系统。便于维护，根据需求平滑演进，添
加或者隐藏字段。

对比于resful

●restful: Representational State Transfer表属性状态转移。本
质上就是用定义uri,通过api接口来取得资源。通用系统架构,
不受语言限制。

resful一个接口只能返回一个资源，graphql一次可以返回多个资源。
resful用不同的url来区分资源，graphql用类型区分

graphql的类型

基本类型：String，Boolean，Float,Int ,ID,可以在schema中直接使用。
数组[类型]：[int]代表整型数组。

参数类型传递

和js传递参数一样，小括号内定义形参，但是注意:参数需要定
义类型。

● !(叹号)代表参数不能为空。

type Query {
//返回的数组
rollDice( numDice: Int!， numSides: Int): [Int ]
}

自定义参数类型

● GraphQL允许用户自定义参数类型,通常用来描述要获取的资
源的属性。


type Account {
name: String .
age: Int
sex: String
department: String
salary(city: String): Int
}

type Query {
account(name: String): Account
}

案例

服务端接口

var express = require('express');
var {
    buildSchema
} = require('graphql')
const graphqlHTTP = require('express-graphql')
var app = express();
// 定义模型 查询 type不能丢
const schema = buildSchema(`
   type Query {
       getclassmate(classNo:Int!):[String]
       account(username: String): Account
   }
   type Account {
    name: String 
    age: Int
    sex: String
    department: String
    salary(city: String): Int
    }
    `)
// 定义查询对应的处理器
const root = {
    getclassmate: ({
        classNo
    }) => {
        const obj = {
            31: ["lisa", "dave", "phil"],
            61: ["张三", "李四", "王麻子"],
            51: ["但是", "ds", "eds"]
        }
        return obj[classNo]
    },
    account: ({
        username
    }) => {
        // 先定义返回值中的内容
        const name = username;
        const sex = "man";
        const age = 12
        const department = "mis";
    // 由于有参数传递进来，所以使用解构赋值 且判断不同的值对应返回的内容
        const salary = ({
            city
        }) => {
            if (city === "北京" || city === "上海" || city === "深圳") {
                return 10000;

            } else {
                return 4000;
            }
        }
        // 最后整体返回
        return{
            name,
            sex,
            age,
            department,
            salary
        }
    }
}
/* GET users listing. */
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true
}));
app.listen(3002, () => {
    console.log("开启3002成功")
});
// 向外公开文件夹供用户访问静态资源index
app.use(express.static('public'))

访问端口信息
在这里插入图片描述

在客户端访问graphql接口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="getdata()">获取数据</button>
    <script>
        function getdata() {
            //    定义字符串  account(username: String): 改造
            const query = `
              query Account($username: String){
                account(username:$username){
                    name,
                    sex,
                    salary(city: "北京")
                }
           }
           `
            //    定义变量，该变量自动绑定$username
            var variables = { username: "张安三" }

            fetch('/graphql', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                //   转换为字符串
                body: JSON.stringify({
                    query:query,
                    variables: variables
                })
            }).then(res => res.json).then(data => {
                console.log(data)
            })
        }
    </script>
</body>

</html>

network中可以看到在这里插入图片描述
注意：

1.定义的int型如果在定义处理器中加“13”会默认转换为int，但是如果有其他字符，或报错，请求后会有提示，且对应字段为null
2.定义模型的type 不能丢且后面必须是大写字母开头的单词
客户端访问的参数字段一定要对应一致，

请求数据貌似使用apollo的方式，还没研究，下来看看

Amnesia�

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
graphql的学习（一）

graphQl学习介绍●GraphQL是Facebook开发的一 -种数据查询语言，并于2015年公开发布。它是REST API的替代品●GraphQL既是- -种用于API的查询语言也是一-个满足你数据查询的运行时。GraphQL 对你的API中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让API更容易地随着时间推移而演进。●官网: https://graphql.org/●中文网: http://graphql.cn/●特点:1.
复制链接

扫一扫