GraphQL

已于 2022-01-25 11:08:31 修改
阅读量793 收藏
点赞数
文章标签： graphql 后端
于 2022-01-21 13:04:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53657413/article/details/122603950
版权

一、GraphQL 是什么？

GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。

二、 简单的使用搭建

1、创建或进入一个空目录，在该目录下输入如下命令

npm init -y

2、搭建环境

npm install express graphql express-graphql -S

3、创建文件 helloworld.js

const express = require('express');
const {buildSchema} = require('graphql');
const { graphqlHTTP } = require('express-graphql');
// 定义schema，查询和类型
const schema = buildSchema(`
    type Account {
        name: String
        age: Int
        sex: String
        department: String
    }
    type Query {
        hello: String
        accountName: String
        age: Int
        account: Account
    }
`)
// 定义查询对应的处理器
const root = {
    hello: () => {
        return 'hello world';
    },
    accountName: () => {
        return '张三丰';
    },
    age:()=>{
        return 18;
    },
    account: ()=>{
        return {
            name: '李四光',
            age: 18,
            sex: '男',
            department: '科学院'
        }
    }
}
const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true
}))
app.listen(3000, ()=>{
    console.log("访问到了");
});

4、运行文件

node helloworld.js

5、浏览器进入 localhost:3000 端口

6、加上后续参数

7、就可以进入 Graphql 界面

三、参数类型与参数传递

1、参数类型

	1.1基本类型：String，Int，Float，Boolean和ID，可以在shema声明的时候直接使用
	1.2类型 代表数组，例如： [int]代表整型数组

2、参数传递

2.1  和js传递参数一样，小括号定义形参，但是注意：参数需要定义类型
2.2 ！（叹号）代表参数不能为空
		type Query{
			rollDice(numDice：Int!，numSides：Int) :[Int]
	}

3、核心代码

const express = require('express');
const {buildSchema} = require('graphql');
const { graphqlHTTP } = require('express-graphql');

const schema = buildSchema(`
type Query {
        getClassMates(classNo: Int!): [String]
    }
`)
const root = {
    getClassMates({ classNo}) {
        const obj = {
            31: ['张三', '李四', '王五'],
            61: ['张大三', '李大四', '王大五']
        }
        return obj[classNo];
    }
    }


const app = express();
app.use('/graphql', graphqlHTTP({
    schema: schema,
    rootValue: root,
    graphiql: true
}))
app.listen(3000, ()=>{
    console.log("访问到了");
});

自定义类型参数

// 定义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
        }
    }
}

四、GraphQL Cli

如何在客户端访问GraphQL?

在baseType.js  追加

app.use(express.static('public'))

在目录下创建public 文件夹，在文件夹下建立 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(data => {
            console.log(data.data.account);
        })
    }
</script>
</html>

结果截图

五、使用Mutations修改数据

创建mutation.js

const express = require('express');
const {buildSchema} = require('graphql');
const { graphqlHTTP }= require('express-graphql');
// 定义schema，查询和类型, mutation
const schema = buildSchema(`
    input AccountInput {
        name: String
        age: Int
        sex: String
        department: String
    }
    type Account {
        name: String
        age: Int
        sex: String
        department: String
    }
    type Mutation {
        createAccount(input: AccountInput): Account
        updateAccount(id: ID!, input: AccountInput): Account
    }
    type Query {
        accounts: [Account]
    }
`)

const fakeDb = {};

// 定义查询对应的处理器
const root = {
    accounts() {
        var arr = [];
        for(const key in fakeDb) {
            arr.push(fakeDb[key])
        }
        return arr;
    },
    createAccount({ input }) {
        

        // 相当于数据库的保存
        fakeDb[input.name] = input;
        // 返回保存结果
        return fakeDb[input.name];
    },

    updateAccount({ id, input }) {
        // 相当于数据库的更新
        const updatedAccount = Object.assign({}, fakeDb[id], input);
        fakeDb[id] = updatedAccount;
        // 返回保存结果
        return updatedAccount;
    }
}

const app = express();

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

app.listen(3000,()=>{
    console.log("访问到了");
});

六、认证与中间件

const middleware = (req, res, next) => {
    if(req.url.indexOf('/graphql') !== -1 && req.headers.cookie.indexOf('auth') === -1) {
        res.send(JSON.stringify({
            error: "您没有权限访问这个接口"
        }));
        return;
    }
    next();
}
app.use(middleware);

七、高级Constructing Types（提高可维护性，代码量上升）

1.使用GraphQLObjectType定义Type（类型）

原始代码

// 定义schema，查询和类型
 const schema = buildSchema(`
     type Account {
         name: String
         age: Int
         sex: String
         department: String
     }
    type Query {
        account(username: String): Account
     }
 `)

高级代码

var AccountType = new graphql.GraphQLObjectType({
    name: 'Account',
    fields: {
        name: { type: graphql.GraphQLString },
        age: { type: graphql.GraphQLInt },
        sex: { type: graphql.GraphQLString },
        department: { type: graphql.GraphQLString }
    }
});

2、使用GraphQLObjectType定义query(查询)

原始代码

 const schema = buildSchema(`
     type Account {
         name: String
         age: Int
         sex: String
        department: String
     }
     type Query {
       account(username: String): Account
    }
 `)

高级代码

var queryType = new graphql.GraphQLObjectType({
    name: 'Query',
    fields: {
        account: {
            type: AccountType,
            // `args` describes the arguments that the `user` query accepts
            args: {
                username: { type: graphql.GraphQLString }
            },
            resolve: function (_, { username }) {
                const name = username;
                const sex = 'man';
                const age = 18;
                const department = '开发部';
                return {
                    name,
                    sex,
                    age,
                    department
                }
            }
        }
    }
});

3、创建shema

var schema = new graphql.GraphQLSchema({ query: queryType});

爱林颖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
GraphQL的代码实践
Charles_2019的博客
03-13 416
1. Good and Bad on GraphQL 普通的Query 是去查询数据库，而GraphQL 是去查询API， 这个可以给予开发他们所需的所有数据，不多不少 i. Good side of GraphQL a. 精准抓取数据 GraphQL minimizes the amount of data which is transferred across the wire by bei...
graphql
03-09
出勤API 有关您的项目和/或概述的一些信息，说明该项目的含义。 动机 对创建和维护项目背后的动机的简短描述。 这应该可以解释为什么该项目存在。 使用的技术/框架 前任。 -- 内置 特征 是什么使您的项目脱颖而出？ 程式码范例 为了尽可能简洁地显示库的功能，开发人员应该能够通过查看代码示例来弄清您的项目如何解决他们的问题。 确保您要展示的API是显而易见的，并且您的代码简短明了。 安装 提供有关如何使开发环境运行的逐步示例和说明。 然后安装示例示例 npm install node run start:demon API参考 根据项目的大小，如果它足够小且足够简单，则可以将参考文档添加到自述文件中。 对于中型到大型项目，重要的是至少提供一个指向API参考文档所在位置的链接。 使用者： type User { _id : ID ! rfid : String ! role :
graphql基础
02-17
graphql基础
GraphQL的HelloWorld
weixin_34331102的博客
12-09 196
GraphQL 一种用于 API 的查询语言。 GraphQL是一种新的API标准，它提供了一种更高效、强大和灵活的数据提供方式。它是由Facebook开发和开源，目的是为了解决因前端交互不断变化，与后端接口需要同步修改的痛点。 一般开发中，后端服务为前端提供接口会有两种考虑方式： 一种是根据前端页面的展示来设计接口，一个接口尽量满足一个页面所需要的所有数据 一种是从数据实体的维度设计，一个接...
GraphQL入门
belle_mei的博客
06-22 368
npm init -y下载依赖包 +添加 .babelrc 文件 在package.json中添加运行命令 创建index.js文件(入口文件) 创建api文件夹，在文件夹内新增schema.js、resolvers.js schema.js内容 resolvers.js内容 运行 运行成功 在浏览器上打开http://localhost:4000/graphql，然后点击Query your server就可以进入数据操作界面。 字段（Fields） 简单而言，Grap
GraphQL in Action
11-22
GraphQL in Action GraphQL 是一种查询语言，用于提高 API 的效率和灵活性。它允许客户端指定需要获取的数据，而不需要从服务器获取大量的数据。 GraphQL 语言由 Facebook 开发，目前已经成为业界标准。 在 ...
GraphQL Java
07-16
GraphQL Java implementation. It requires a little Spring and Java knowledge. GraphQL is a query language to retrieve data from a server. It is an alternative to REST, SOAP or gRPC. One very important ...
Practical GraphQL
最新发布
03-12
Practical GraphQL
GraphQl
03-14
**GraphQL简介** GraphQL是一种用于API的查询语言，由Facebook在2015年开源，它为客户端提供了更多控制数据获取的能力。与传统的RESTful API相比，GraphQL允许客户端精确地指定需要哪些数据，避免了过度获取或不足...
修改GraphQL的源码Scalars
qq_26896085的博客
03-14 245
最近在学习graphql的时候，有个表有Date类型的数据，但是在设置字段类型的时候，发现graphql只支持其基本的类型， 如图： 不包含Date类型的数据。 强行使用GarphQLString，输出的数据如下 于是想到自己写一个方法来支持Date类型，仔细的看了一下Scalars源码，自己动手写了一个， 先看下测试结果： 最终写出的代码如下： MyScalars.ja...
graphQL与数据库、web整合及实现graphql分页，动态传参
qq_26896085的博客
03-15 2200
数据库中的数据：https://blog.csdn.net/qq_26896085/article/details/104843889 mapper包下 EmployeeMapper.java 这里使用了Mybatis-plus,如果只是对单表进行查询，接口继承BaseMapper即可 package com.woodie.mapper; import com.baomidou.myb...
GraphQL 入门
woyebuzhidao321的博客
10-28 902
对于将枚举作为一等公民的语言，它的实现就可以利用这个特性；在有了 express-graphql 的情况下，你可以向 GraphQL 服务器上的入口端点发送一个 HTTP POST 请求，其中将 GraphQL 查询作为 JSON 载荷的 query 字段，就能调用 GraphQL 服务器。GraphQL 定义了自己的类型语言，称之为 “GraphQL schema language” —— 它和 GraphQL 的查询语言很相似，让我们能够和 GraphQL schema 之间可以无语言差异地沟通。
GraphQL - 参数类型与参数传递
A_bad_horse的专栏
04-07 5007
2019GraphQL入门到精通https://www.bilibili.com/video/BV1Ab411H7Yv?from=search&seid=16813706797539177189 视频 4 GraphQL基本参数类型 String, Int, Float, Boolean和ID。在schema声明时直接使用。 （ID不能重复使用） [类型]代表数...
GraphQL(三)
chili_fan的博客
02-06 379
使用Mutations修改数据 查询使用query，修改数据使用Mutation。这里要注意的是：写mutation的话必须写query，否则就会报错。 链接数据库 // 构建Schema，定义查询的语句和类型 //input用来定义输入类型 //Account查询类型 const schema = buildSchema(` input AccountInput{ name:String age:Int sex:String department:String
GraphQL入门与开源的GraphQL引擎Hasura体验
Heartsuit的博客
11-04 1970
Hasura 是一个开源的 GraphQL 引擎，它可以帮助开发人员快速构建和部署现代应用程序的后端。它提供了一个自动化的 GraphQL API ，可以直接连接到现有的数据库，并提供实时数据推送和订阅功能。 Hasura 团队总部位于印度。作为一款后端低代码平台，也推荐使用对标 Hasura 的国产替代产品：飞布：飞布是可视化API开发平台，对标 hasura ，灵活开放、多语言兼容、简单易学，能构建生产级 WEB API ，让前端变全栈，让后端不搬砖。
graphql的学习（一）
qq_44242030的博客
05-27 241
graphQl学习 介绍 ●GraphQL是Facebook开发的一 -种数据查询语言，并于2015年 公开发布。它是REST API的替代品 ●GraphQL既是- -种用于API的查询语言也是一-个满足你数据查 询的运行时。GraphQL 对你的API中的数据提供了一套易于理 解的完整描述，使得客户端能够准确地获得它需要的数据，而且 没有任何冗余，也让API更容易地随着时间推移而演进。 ●官网: https://graphql.org/ ●中文网: http://graphql.cn/ ●特点: 1.
GraphQL学习与实践2（类型、传参与构造函数类型）
onsenOnly的博客
10-25 813
GraphQL学习篇2（类型、传参与构造函数定义）Type System传参 在上一节的已经成功搭建了一个hello world的基础上，这里来说一下GraphQL类型相关及其一些实践操作、搭建一个schema等。 Type System 几乎任何一门语言，都是具有类型的。GraphQL常用的类型有： 标量类型 列表和非空 枚举类型 对象类型 接口 联合类型 输入类型 … 标量类型 Gra...
【Python】Django使用GraphQL详解
ns2250225
02-22 8689
为什么不用REST Rest一次只能请求一个资源，会造成太多的http请求 Rest的版本控制问题是一个痛 GraphQL的关键语句 query：查询，相当于GET mutation：变化，相当于POST, PUT, DELETE 环境搭建 win10 Python3.6 pip install django==2.0.1 pip install graphen...
Developing an API with FastAPI and GraphQL
03-17
"在本教程中，您将学习如何使用FastAPI、GraphQL和Masonite ORM构建一个CRUD应用。通过学习，您将达到以下目标：理解为何选择GraphQL而不是传统的REST；掌握Masonite ORM与Postgres数据库交互的方法；了解GraphQL中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值