【GraphQL】---GraphQL的基本使用

最新推荐文章于 2024-02-12 23:01:30 发布
最新推荐文章于 2024-02-12 23:01:30 发布
阅读量2.1k 收藏 3
点赞数 3
分类专栏： react 文章标签： GraphQL Apollo 数据管理 react react-redux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fishmann/article/details/89609959
版权

GraphQL介绍

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

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

例如一个查询请求：

//GraphQL语法，后面会讲到
//会根据字段进行数据的获取，而不像REST直接将所有的字段进行返回，这是一个特别好的前端优化的点
query{
	getAccount(userId:1){
		name	//graphql语法会根据里面的字段取出对应的值
		age
		sex
	}
}

结果如下：

{
	“data”:{
		"getAccount":{
			"name":"xxx",
			"age":"xxx",
			"sex":"xxx"
		}
	}
}

GraphQL与restful对比

  1. restful:Representational State Transfer表属性状态转移。本质上就是用定义uri，通过api接口来取得资源。通用系统架构，不受语言限制。restful还是主流。
  2. 例子：饿了么接口
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  3. restful一个接口只能返回一个资源，graphql一次可以获取多个资源。
  4. restful用不同的url来区分资源，graphql用类型区分资源。

使用express+GraphQL

  1. npm init -y //初始化一个package.json文件
  2. npm i express graphql express-graphql -S
  3. node helloWorld.js
  4. localhost:4000/graphql
  5. query{hello}
    在这里插入图片描述
const express = require('express');
const graphqlHTTP = require('express-graphql');
const {buildSchema} = require('graphql');

//Construct a schema,using GraphQL,schema language
//构建schema，这定义查询的语句和类型
const schema= buildSchema(
	type Account{
		name:String
		age:Int
		sex:String
	}
	type Query{
		hello:String
		accountName:String
		account:Account
	}
);

//The root proyides a resolver function for each API
//定义查询所对应的resolver,也就是查询对应的处理器
const root={
	hello:()=>{
		return 'Hello World!';
	},
	accountName:()=>{
		return "test name";
	};
	account:()=>{
		return {
			name:"test name",
			age:11,
			sex:"test sex",
		}
	}
}；

const app = express();
app.use('/graphql',graphqlHTTP({
	schema:schema,
	rootValue:root,
	graphql:true,	//是否启用调试界面，false就不能调试了，开发时是true，上线的话变为false
}))
app.listen(4000);

类型定义与返回值不一致时会报错
在这里插入图片描述

基本参数类型

  • 基本类型：String/Int/Float/Boolean/ID。可以在schema声明的时候直接使用。
  • [类型]代表数组，例如：[Int]代表整型数组。

参数传递

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

Test Demo:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自定义参数类型

  • GraphQL允许用户自定义参数类型，通常用来描述要获取的资源的属性。
type Account{
	name:String
	age:Int
	sex:String
	salary(city:String):Int
}
type Query{
	account(name:String):Account	//定义一个Account属性，然后在Account类型中进行返回
}

GraphQL clients

  • 如何在客户端访问graphql的接口？
var username = 66;
//固定写法，Account($username:Int!)，account(username:$username),$username和后端的username是一样的
var query = `query Account($username:Int!){
	account(username:$username)
}`;
fetch('/graphql',{
	method:'POST',
	headers:{
		'Content-Type':'application/json',
		'Accept':'application/json',
	},
	//因为是post，数据从body出去
	body:JSON.stringify({
		query,
		variables:{username},
	})
})
.then(r=>r.json())
.then(data=>console.log('data returned',data));

后端代码

const express = require('express');
const {buildSchema} = require('graphql');
const graphql = require('express-graphql');
//定义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:['name1','name2','name3'],
			32:['name4','name5','name6']
		}
		return obj[classNo];
	},
	account({username}){
		const name=username;
		const sex='man';
		const age=11;
		const department='testdepartment';
		const salary=({city})=>{
			if(city==='北京'||city==='上海'||city==='广中'||city==='深圳'){
				return 10000;
			}
			return 2000;
		}
		return {
			name,
			sex,
			age,
			department,
			salary
		}
	}
}
const app=express();
app.use('/graphql',graphqlHTTP({
	schema:schema,
	rootValue:root,
	graphiql:true
}))
//公开文件夹，供用户访问静态资源
app.use(express.static("public")
app.listen(3000);

前端代码

  <!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>
</html>
<script>
  function getData(){
    const query=`
      query Account($username:String,$city:String){
        account(username:$username){
          name
          age
          sex
          salary(city:$city)
        }
      }
    `
    const variables={username:"lisi",city:'深圳'}

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

使用Mutations修改数据

  • 查询使用query，修改数据使用Mutation
    `
//input表示输入
 input AccountInput{
    name:String
    age:Int
    sex:String
    department:String
    salary:Int
  }
  type Mutation{
  //括号里是形参
    createAccount(input:AccountInput):Account
    updateAccount(id:ID!,input:AccountInput):Account
  }

代码
小坑：

  1. 写mutation的话必须写query
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{
    account:[Account]
  }
`)
const fakeDB={};
//定义查询对应的处理器
const root={
  account(){
    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 updateAccount=Object.assign({},fakeDB[id],input);
    fakeDB[id]=updateAccount;
    //返回数据库
    return updatedAccount;
  }
}
const app=express();
app.use('/graphql',graphqlHTTP({
  schema:schema,
  rootValue:root,
  graphiql:true
}))

app.listen(3000)

认证与中间件（高级部分）

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{
    account:[Account]
  }
`)
const fakeDB={};
//定义查询对应的处理器
const root={
  account(){
    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 updateAccount=Object.assign({},fakeDB[id],input);
    fakeDB[id]=updateAccount;
    //返回数据库
    return updatedAccount;
  }
}
const app=express();

//增加一个判断权限的中间件

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

//使用中间件
app.use(middleware)

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

app.listen(3000)

Constructing Types（高级部分）

  1. 使用GraphQLObjectType定义type（类型）
    意义：方便后期维护
    在这里插入图片描述
  2. 使用GraphQLObjectType定义query（查询）

在这里插入图片描述
3. 创建schema

在这里插入图片描述

高级_与数据库结合实战

在这里插入图片描述

const express = require('express');
const {
  buildSchema
} = require('graphql');
const graphqlHTTP = require('express-graphql');
const mysql = require('mysql');
// https://www.npmjs.com/package/mysql
var pool = mysql.createPool({
  connectionLimit: 10,
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'xxxx'
})

//定义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
    deleteAccount(id:ID):Boolean
    updateAccount(id:ID!,input:AccountInput):Account
  }
  type Query{
    account:[Account]
  }
`)
const fakeDB = {};
//定义查询对应的处理器
const root = {
  account() {
    return new Promise((resolve,reject)=>{
      pool.query('select name,age,sex,department from account',(err,results)=>{
        if(err){
          console.log('error',err.message);
          return;
        }
        const arr=[];
        for(const i=0;i<results.length;i++){
          arr.push({
            name:results[i].name,
            sex:results[i].sex,
            age:results[i].age,
            department:results[i].department,
          })
        }
        resolve(results);
      })
    })
  },
  createAccount({
    input
  }) {
    const data = {
      name: input.name,
      sex: input.sex,
      age: input.age,
      department: input.department
    }
    return new Promise((resolve, reject) => {
      pool.query('insert into accout set ?', data, (err) => {
        if (err) {
          console.log('error',err.message);
          return;
        }
        //返回保存结果
        resolve(data);
      })
    })
  },
  updateAccount({
   id,input
  }) {
    const data=input;
    return new Promise((resolve,reject)=>{
      pool.query('update account set?where name=?',[data,id],(err)=>{
        if(err){
          console.log('err',err.message);
          return;
        }
        resolve(data);
      })
    })    
  },
  deleteAccount({id}){
    return new Promise((resolve,reject)=>{
      pool.query('delete account where name=?',[id],(err)=>{
        if(err){
          console.log("err",err.message)
          reject(false);
          return;
        }
        resolve(true);
      })
    })
  }
}
const app = express();
//增加一个判断权限的中间件
const middleware = (req, res, next) => {
  if (req.url.indexOf('/graphql') != -1 && req.headers.cookie.indexOf('auth')) {
    res.send(JSON.stringify({
      error: "您没有权限访问这个接口"
    }));
    return;
  }
  next();
}
//使用中间件
app.use(middleware)

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

app.listen(3000)

学习视频：https://www.bilibili.com/video/av46200333?from=search&seid=9265460496338796424

北杨
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
graphql-tutorial 教程基本订阅.zip
05-27
GraphQL是由Facebook发明和开发的一种新的API标准。它是一种开源的服务器端技术，现在由世界各地的公司和个人组成的大型社区维护。它也是一个执行引擎，作为数据查询语言，用于获取声明性数据。 它的开发是为了优化RESTful API调用，并提供了一种灵活、健壮和更有效的REST替代方案。 GraphQL是用于API的数据查询和操作语言，也是在为数据定义类型系统时执行查询的服务器端运行时。与REST api不同，GraphQL服务器只提供一个端点，并使用客户机请求的精确数据进行响应。 GraphQL是Facebook的一个内部项目。它是由Facebook在2012年开发的，用于他们的原生移动应用程序。之后，它在2015年的React.js大会上公开发布。 2018年晚些时候，Facebook将这个GraphQL项目转移到一个名为GraphQL基金会的新成立的基金会，该基金会由非营利的Linux基金会托管。 GraphQL是由Facebook的团队创建的，其首席创建者是Lee Byron，他想让GraphQL在网络平台上无处不在。
GraphQL全面深度讲解
FeelTouch Labs
10-02 2439
所以在 GraphQL 请求中，开发者对于返回的结果是有确定性的。
无涯教程-GraphQL - 查询语句
无涯教程
02-12 1203
在此示例中，无涯教程将一组学生存储在json文件中。每个学生模型都有诸如firstName，lastName和id之类的字段，但没有fullName。在这里将讨论如何进行查询以检索所有学生的全名。为此，需要在两个模式解析器中创建fullName字段。如果查询中有一些动态值要传递，则使用变量表示这些动态值。因此，查询可以被客户端应用程序重用。创建一个简单的应用程序以了解查询变量。
什么是GraphQL？
代码教主
06-17 3393
总览 GraphQL是一个新的令人兴奋的API，用于临时查询和操作。 它非常灵活，并提供许多好处。 它特别适用于公开以图和树形式组织的数据。 Facebook在2012年开发了GraphQL，并在2015年将其开源。 它Swift起飞并成为最热门的技术之一。 许多创新公司在生产中采用并使用了GraphQL。 在本教程中，您将学习： GraphQL的原理 与REST的比较 如何...
解密GraphQL：从入门到精通，全面详解！！！
m0_72410588的博客
07-26 549
GraphQL是一种用于API的查询语言和运行时环境，由Facebook开发并于2015年开源释放。它提供了一种更高效、更灵活的方式来请求和响应数据，使得客户端可以精确地获取所需数据，避免了传统RESTful API中的过度和不完整的数据传输问题。通过本篇博客的学习，我们详细了解了GraphQL的基本概念、查询语法以及与传统RESTful API的对比。我们探索了GraphQL的进阶用法和实战应用，并演示了如何搭建GraphQL服务器和集成GraphQL客户端。
GraphQL 概念入门
兵
07-05 5041
GraphQL 概念入门 Restful is Great! But GraphQL is Better. – My Humble Opinion. GraphQL will do to REST what JSON did to XML. – Samer Buna from Quora GraphQL 作为 Facebook 的前端三架马车之一（另外两架是 Relay 和 React, 三者可以无缝结合），提出也有一段时间了，但真正用过的人却出奇的少， 截止到 2018 年底，根据 Stateofjs
关于graphql快速入门
热门推荐
前端精髓
01-31 1万+
GraphQL是什么？ 一种用于 API 的查询语言，GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。 GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定
深入GraphQL 的使用语法
兵
07-07 3926
深入GraphQL 的使用语法 对于GraphQL 的使用语法在上一节中已经大概介绍了基本的使用方式了，这一篇将会对上一篇入门做拓展，努力将所有的使用语法都覆盖到。 1. 终端语法 首先是介绍在前端查询时用的语法，分成Query 和Mutation 两部分，Subscription 的和Query 是类似的就不特别说明了。 1.1 Query 假设我们现在有一个数据集，结构是这样的： 学生和老师各有各自的特有字段； 学生中有个获取所有相关老师的方法，老师中也有一个获取所有学生的方法； 学生和老师互为多对多
GraphQL
深蓝旭的博客
11-29 3975
一、GraphQL简介 1、什么是GraphQL？ 　　GraphQL官网：https://graphql.org/，这个是英文的，https://graphql.js.cool/这个是中文的。 　　GraphQL是一种用于API的查询语言。GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构...
GraphQL的认识与使用
u010882325的博客
05-05 4717
GraphQL的认识与使用 前言 GraphQL已经被越来越多的开源项目作为业务接口的开发规范，而在此之前流行的是restful接口。那么GraphQL是什么？GraphQL相比restful有哪些好处？本文带你初窥GraphQL的门道，看看你们的业务是否适合使用GraphQL。 GraphQL是什么 GraphQL = Graph + QL (query language) GraphQL是一种图表化(graph)的查询语言(query language)，用于定义API的查询语法。GraphQL只定
graphql-code-generator：一种用于基于GraphQL模式和GraphQL操作（querymutationsubscription）生成代码的工具，并灵活支持自定义插件
01-31
无论您使用哪种语言，GraphQL代码生成器都可以满足您的要求。 GraphQL代码生成器可让您根据非常灵活且可自定义的插件来选择所需的输出。 您还可以编写插件来生成满足您需求的自定义输出。 您可以在浏览器中试用该...
graphql-yoga-dockerdemo:graphql-yoga-docker演示
05-10
graphql-yoga的graphql基本演示 怎么跑 yarn 访问与测试 开始 yarn start 测试 open http://localhost:4000 一些图像 供码头工人使用 建立形象 docker-compose build docker-compose运行 docker-compose up -d 带有...
aprender-graphql-lumen:通过Lumen了解GraphQL
04-27
学习GraphQL + Lumen Micro框架客观的该项目旨在逐步创建使用GraphQL +流明的方法先决条件PHP基础级别使用过一些框架（Ruby on Rails，Django或Lumen） Docker / Docker Compose基本级别安装依存关系： Linux（我...
graphql-base-module：在OXID中使用GraphQL的主要框架
02-09
氧化/碱 该模块提供： 的基本实现 使用授权和身份验证 ...您可以使用自己喜欢的GraphQL客户端浏览API，如果尚未安装该API，则可以使用 。 要登录并获取令牌，请将以下GraphQL查询发送到服务器 query { token
3796 i-FRAME 安装、操作和维护手册
04-27
3796 i-FRAME 安装、操作和维护手册
我的visio画图 资源备用
最新发布
04-27
我的visio画图
NPOI是指构建在POI 3.x版本之上的一个程序
04-27
NPOI可以在没有安装Office的情况下对Word或Excel进行读写，NPOI是一个开源的C#读写Excel、WORD等微软OLE2组件文档的项目
基于STM32F103C8单片机设计-旋转编码器数码管显示程序KEIL工程源码.zip
04-27
STM32学习软件编程资料，STM32F103C8单片机经典外设应用设计实例软件源代码，KEIL工程文件，可供学习参考。
配置eslint-plugin-graphql插件
06-03
要配置 `eslint-plugin-graphql` 插件，您需要遵循以下步骤： 1. 安装 `eslint-plugin-graphql` 插件： ``` npm install eslint-plugin-graphql --save-dev ``` 2. 在您的 `.eslintrc` 配置文件中添加插件： ``` { "plugins": [ "graphql" ], "rules": { "graphql/template-strings": ["error", { "env": "literal", "schemaJson": require("./src/schema.json") }] } } ``` 其中 `"graphql/template-strings"` 规则使用了 `eslint-plugin-graphql` 插件提供的指令，该指令检查 GraphQL 模板字符串中的语法并对其进行验证。 3. 如果您的 GraphQL 模式是从外部文件加载的，则可以通过将其导入并在配置文件中引用来为插件提供此模式的访问权限： ``` import schema from './schema.graphql'; { "plugins": [ "graphql" ], "settings": { "graphql": { "schemaString": schema } }, "rules": { "graphql/template-strings": ["error", { "env": "literal", "schemaJson": require("./src/schema.json") }] } } ``` 以上是配置 `eslint-plugin-graphql` 插件的基本步骤，您可以根据自己的需求进行自定义配置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值