GraphQL入门有这一篇就足够了___Charming__的博客-CSDN博客_graphql
GraphQL入门有这一篇就足够了
置顶
__Charming__
于 2018-10-08 13:39:16 发布
146360
收藏
354
分类专栏：
前端
graphql
文章标签：
graphql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41882147/article/details/82966783
版权
前端
同时被 2 个专栏收录
35 篇文章
0 订阅
订阅专栏
graphql
1 篇文章
0 订阅
订阅专栏
本文将从GraphQL是什么，为什么要使用GraphQL，使用GraphQL创建简单例子，以及GraphQL实战，四个方面对GraphQL进行阐述。说得不对的地方，希望大家指出斧正。
github项目地址：https://github.com/Charming2015/graphql-todolist
一、GraphQL是什么?
关于GraphQL是什么，网上一搜一大堆。根据官网的解释就是一种用于 API 的查询语言。
一看到用于API的查询语言，我也是一脸懵逼的。博主你在开玩笑吧？你的翻译水平不过关？API还能查吗？API不是后端写好，前端调用的吗？
的确可以，这就是GraphQL强大的地方。 引用官方文档的一句话：
ask exactly what you want.
二、为什么要使用GraphQL?
在实际工作中往往会有这种情景出现：比如说我需要展示一个游戏名的列表，可接口却会把游戏的详细玩法，更新时间，创建者等各种各样的 （无用的） 信息都一同返回。
问了后端，原因大概如下：
原来是为了兼容PC端和移动端用同一套接口或者在整个页面，这里需要显示游戏的标题，可是别的地方需要显示游戏玩法啊，避免多次请求我就全部返回咯或者是因为有时候项目经理想要显示“标题+更新时间”，有时候想要点击标题展开游戏玩法等等需求，所以把游戏相关的信息都一同返回
简单说就是：
兼容多平台导致字段冗余一个页面需要多次调用 API 聚合数据需求经常改动导致接口很难为单一接口精简逻辑
有同学可能会说那也不一定要用GraphQL啊，比方说第一个问题，不同平台不同接口不就好了嘛
http://api.xxx.com/web/getGameInfo/:gameID
http://api.xxx.com/app/getGameInfo/:gameID
http://api.xxx.com/mobile/getGameInfo/:gameID
或者加个参数也行
http://api.xxx.com/getGameInfo/:gameID?platfrom=web
这样处理的确可以解决问题，但是无疑加大了后端的处理逻辑。你真的不怕后端程序员打你？
这个时候我们会想，接口能不能不写死，把静态变成动态？
回答是可以的，这就是GraphQL所做的!
三、GraphQL尝尝鲜——(GraphQL简单例子)
下面是用GraphQL.js和express-graphql搭建一个的普通GraphQL查询（query）的例子，包括讲解GraphQL的部分类型和参数，已经掌握了的同学可以跳过。
1. 先跑个hello world
新建一个graphql文件夹，然后在该目录下打开终端，执行npm init --y初始化一个packjson文件。安装依赖包：npm install --save -D express express-graphql graphql新建schema.js文件，填上下面的代码
//schema.js
const {
GraphQLSchema,
GraphQLObjectType,
GraphQLString,
} = require('graphql');
const queryObj = new GraphQLObjectType({
name: 'myFirstQuery',
description: 'a hello world demo',
fields: {
hello: {
name: 'a hello world query',
description: 'a hello world demo',
type: GraphQLString,
resolve(parentValue, args, request) {
return 'hello world !';
});
module.exports = new GraphQLSchema({
query: queryObj
});
这里的意思是新建一个简单的查询，查询名字叫hello，会返回字段hello world !，其他的是定义名字和查询结果类型的意思。
同级目录下新建server.js文件，填上下面的代码
// server.js
const express = require('express');
const expressGraphql = require('express-graphql');
const app = express();
const schema = require('./schema');
app.use('/graphql', expressGraphql({
schema,
graphiql: true
}));
app.get('/', (req, res) => res.end('index'));
app.listen(8000, (err) => {
if(err) {throw new Error(err);}
console.log('*** server started ***');
});
这部分代码是用express跑起来一个服务器，并通过express-graphql把graphql挂载到服务器上。
运行一下node server，并打开http://localhost:8000/
如图，说明服务器已经跑起来了 打开http://localhost:8000/graphql，是类似下面这种界面说明已经graphql服务已经跑起来了！ 在左侧输入 (graphql的查询语法这里不做说明)
hello
点击头部的三角形的运行按钮，右侧就会显示你查询的结果了
2. 不仅仅是hello world
先简单讲解一下代码：
const queryObj = new GraphQLObjectType({
name: 'myFirstQuery',
description: 'a hello world demo',
fields: {}
});
GraphQLObjectType是GraphQL.js定义的对象类型，包括name、description 和fields三个属性，其中name和description 是非必填的。fields是解析函数，在这里可以理解为查询方法
hello: {
name: 'a hello world query',
description: 'a hello world demo',
type: GraphQLString,
resolve(parentValue, args, request) {
return 'hello world !';
对于每个fields，又有name，description，type，resolve参数，这里的type可以理解为hello方法返回的数据类型，resolve就是具体的处理方法。
说到这里有些同学可能还不满足，如果我想每次查询都想带上一个参数该怎么办，如果我想查询结果有多条数据又怎么处理？
下面修改schema.js文件，来一个加强版的查询（当然，你可以整理一下代码，我这样写是为了方便阅读）
const {
GraphQLSchema,
GraphQLObjectType,
GraphQLString,
GraphQLInt,
GraphQLBoolean
} = require('graphql');
const queryObj = new GraphQLObjectType({
name: 'myFirstQuery',
description: 'a hello world demo',
fields: {
hello: {
name: 'a hello world query',
description: 'a hello world demo',
type: GraphQLString,
args: {
name: { // 这里定义参数，包括参数类型和默认值
type: GraphQLString,
defaultValue: 'Brian'
},
resolve(parentValue, args, request) { // 这里演示如何获取参数，以及处理
return 'hello world ' + args.name + '!';
},
person: {
name: 'personQuery',
description: 'query a person',
type: new GraphQLObjectType({ // 这里定义查询结果包含name,age,sex三个字段，并且都是不同的类型。
name: 'person',
fields: {
name: {
type: GraphQLString
},
age: {
type: GraphQLInt
},
sex: {
type: GraphQLBoolean
}),
args: {
name: {
type: GraphQLString,
defaultValue: 'Charming'
},
resolve(parentValue, args, request) {
return {
name: args.name,
age: args.name.length,
sex: Math.random() > 0.5
};
});
module.exports = new GraphQLSchema({
query: queryObj
});
重启服务后，继续打开http://localhost:8000/graphql，在左侧输入
hello(name:"charming"),
person(name:"charming"){
name,
sex,
age
右侧就会显示出：
你可以在左侧仅输入person方法的sex和age两个字段，这样就会只返回sex和age的信息。动手试一试吧!
person(name:"charming"){
sex,
age
当然，结果的顺序也是按照你输入的顺序排序的。
定制化的数据，完全根据你查什么返回什么结果。这就是GraphQL被称作API查询语言的原因。
四、GraphQL实战
下面我将搭配koa实现一个GraphQL查询的例子，逐步从简单koa服务到mongodb的数据插入查询，再到GraphQL的使用，最终实现用GraphQL对数据库进行增删查改。
项目效果大概如下：
有点意思吧？那就开始吧~ 先把文件目录建构建好
1. 初始化项目
初始化项目，在根目录下运行npm init --y，然后安装一些包：npm install koa koa-static koa-router koa-bodyparser --save -D新建config、controllers、graphql、mongodb、public、router这几个文件夹。装逼的操作是在终端输入mkdir config controllers graphql mongodb public router回车，ok~
2. 跑一个koa服务器 新建一个server.js文件，写入以下代码
// server.js
import Koa from 'koa'
import Router from 'koa-router'
import bodyParser from 'koa-bodyparser'
const app = new Koa()
const router = new Router();
const port = 4000
app.use(bodyParser());
router.get('/hello', (ctx, next) => {
ctx.body="hello world"
});
app.use(router.routes())
.use(router.allowedMethods());
app.listen(port);
console.log('server listen port: ' + port)
执行node server跑起来服务器，发现报错了：
这是正常的，这是因为现在的node版本并没有支持es6的模块引入方式。
百度一下就会有解决方案了，比较通用的做法是用babel-polyfill进行转译。
详细的可以看这一个参考操作：How To Enable ES6 Imports in Node.JS
具体操作是：新建一个start.js文件，写入：
// start.js
require('babel-register')({
presets: [ 'env' ]
})
require('babel-polyfill')
require('./server.js')
安装相关包：npm install --save -D babel-preset-env babel-polyfill babel-register
修改package.json文件，把"start": "start http://localhost:4000 && node start.js"这句代码加到下面这个位置：
运行一下npm run start，打开http://localhost:4000/hello，结果如图： 说明koa服务器已经跑起来了。
那么前端页面呢？
（由于本文内容不是讲解前端，所以前端代码自行去github复制）
在public下新建index.html文件和js文件夹，代码直接查看我的项目public目录下的 index.html 和 index-s1.js 文件修改server.js，引入koa-static模块。koa-static会把路由的根目录指向自己定义的路径（也就是本项目的public路径）
//server.js
import Koa from 'koa'
import Router from 'koa-router'
import KoaStatic from 'koa-static'
import bodyParser from 'koa-bodyparser'
const app = new Koa()
const router = new Router();
const port = 4000
app.use(bodyParser());
router.get('/hello', (ctx, next) => {
ctx.body="hello world"
});
app.use(KoaStatic(__dirname + '/public'));
app.use(router.routes())
.use(router.allowedMethods());
app.listen(port);
console.log('server listen port: ' + port)
打开http://localhost:4000/，发现是类似下面的页面：
这时候页面已经可以进行简单的交互，但是还没有和后端进行数据交互，所以是个静态页面。
3. 搭一个mongodb数据库，实现数据增删改查
注意： 请先自行下载好mongodb并启动mongodb。
a. 写好链接数据库的基本配置和表设定
在config文件夹下面建立一个index.js，这个文件主要是放一下链接数据库的配置代码。
// config/index.js
export default {
dbPath: 'mongodb://localhost/todolist'
在mongodb文件夹新建一个index.js和 schema文件夹， 在 schema文件夹文件夹下面新建list.js
在mongodb/index.js下写上链接数据库的代码，这里的代码作用是链接上数据库
// mongodb/index.js
import mongoose from 'mongoose'
import config from '../config'
require('./schema/list')
export const database = () => {
mongoose.set('debug', true)
mongoose.connect(config.dbPath)
mongoose.connection.on('disconnected', () => {
mongoose.connect(config.dbPath)
})
mongoose.connection.on('error', err => {
console.error(err)
})
mongoose.connection.on('open', async () => {
console.log('Connected to MongoDB ', config.dbPath)
})
在mongodb/schema/list.js定义表和字段：
//mongodb/schema/list.js
import mongoose from 'mongoose'
const Schema = mongoose.Schema
const ObjectId = Schema.Types.ObjectId
const ListSchema = new Schema({
title: String,
desc: String,
date: String,
id: String,
checked: Boolean,
meta: {
createdAt: {
type: Date,
default: Date.now()
},
updatedAt: {
type: Date,
default: Date.now()
})
ListSchema.pre('save', function (next) {// 每次保存之前都插入更新时间，创建时插入创建时间
if (this.isNew) {
this.meta.createdAt = this.meta.updatedAt = Date.now()
} else {
this.meta.updatedAt = Date.now()
next()
})
mongoose.model('List', ListSchema)
b. 实现数据库增删查改的控制器
建好表，也链接好数据库之后，我们就要写一些方法来操作数据库，这些方法都写在控制器(controllers)里面。
在controllers里面新建list.js，这个文件对应操作list数据的控制器，单独拿出来写是为了方便后续项目复杂化的模块化管理。
// controllers/list.js
import mongoose from 'mongoose'
const List = mongoose.model('List')
// 获取所有数据
export const getAllList = async (ctx, next) => {
const Lists = await List.find({}).sort({date:-1}) // 数据查询
if (Lists.length) {
ctx.body = {
success: true,
list: Lists
} else {
ctx.body = {
success: false
// 新增
export const addOne = async (ctx, next) => {
// 获取请求的数据
const opts = ctx.request.body
const list = new List(opts)
const saveList = await list.save() // 保存数据
console.log(saveList)
if (saveList) {
ctx.body = {
success: true,
id: opts.id
} else {
ctx.body = {
success: false,
id: opts.id
// 编辑
export const editOne = async (ctx, next) => {
const obj = ctx.request.body
let hasError = false
let error = null
List.findOne({id: obj.id}, (err, doc) => {
if(err) {
hasError = true
error = err
} else {
doc.title = obj.title;
doc.desc = obj.desc;
doc.date = obj.date;
doc.save();
})
if (hasError) {
ctx.body = {
success: false,
id: obj.id
} else {
ctx.body = {
success: true,
id: obj.id
// 更新完成状态
export const tickOne = async (ctx, next) => {
const obj = ctx.request.body
let hasError = false
let error = null
List.findOne({id: obj.id}, (err, doc) => {
if(err) {
hasError = true
error = err
} else {
doc.checked = obj.checked;
doc.save();
})
if (hasError) {
ctx.body = {
success: false,
id: obj.id
} else {
ctx.body = {
success: true,
id: obj.id
// 删除
export const delOne = async (ctx, next) => {
const obj = ctx.request.body
let hasError = false
let msg = null
List.remove({id: obj.id}, (err, doc) => {
if(err) {
hasError = true
msg = err
} else {
msg = doc
})
if (hasError) {
ctx.body = {
success: false,
id: obj.id
} else {
ctx.body = {
success: true,
id: obj.id
c. 实现路由，给前端提供API接口
数据模型和控制器都已经设计好了，下面就利用koa-router路由中间件，来实现请求的接口。
我们回到server.js，在上面添加一些代码。如下：
// server.js
import Koa from 'koa'
import Router from 'koa-router'
import KoaStatic from 'koa-static'
import bodyParser from 'koa-bodyparser'
import {database} from './mongodb'
import {addOne, getAllList, editOne, tickOne, delOne} from './controllers/list'
database() // 链接数据库并且初始化数据模型
const app = new Koa()
const router = new Router();
const port = 4000
app.use(bodyParser());
router.get('/hello', (ctx, next) => {
ctx.body = "hello world"
});
// 把对请求的处理交给处理器。
router.post('/addOne', addOne)
.post('/editOne', editOne)
.post('/tickOne', tickOne)
.post('/delOne', delOne)
.get('/getAllList', getAllList)
app.use(KoaStatic(__dirname + '/public'));
app.use(router.routes())
.use(router.allowedMethods());
app.listen(port);
console.log('server listen port: ' + port)
上面的代码，就是做了：
1. 引入mongodb设置、list控制器，
2. 链接数据库
3. 设置每一个设置每一个路由对应的我们定义的的控制器。
安装一下mongoose：npm install --save -D mongoose
运行一下npm run start，待我们的服务器启动之后，就可以对数据库进行操作了。我们可以通过postman来模拟请求，先插几条数据： 查询全部数据：
d. 前端对接接口
前端直接用ajax发起请求就好了，平时工作中都是用axios的，但是我懒得弄，所以直接用最简单的方法就好了。
引入了JQuery之后，改写public/js/index.js文件：略（项目里的public/index-s2.js的代码）
项目跑起来，发现已经基本上实现了前端发起请求对数据库进行操作了。 至此你已经成功打通了前端后台数据库，可以不要脸地称自己是一个小全栈了！
不过我们的目的还没有达到——用grapql实现对数据的操作！
4. 用grapql实现对数据的操作
GraphQL 的大部分讨论集中在数据获取（query），但是任何完整的数据平台也都需要一个改变服务端数据的方法。 REST 中，任何请求都可能最后导致一些服务端副作用，但是约定上建议不要使用 GET 请求来修改数据。GraphQL 也是类似 —— 技术上而言，任何查询都可以被实现为导致数据写入。然而，建一个约定来规范任何导致写入的操作都应该显式通过变更（mutation）来发送。
简单说就是，GraphQL用mutation来实现数据的修改，虽然mutation能做的query也能做，但还是要区分开这连个方法，就如同REST中约定用GET来请求数据，用其他方法来更新数据一样。
a. 实现查询 查询的话比较简单，只需要在接口响应时，获取数据库的数据，然后返回;
const objType = new GraphQLObjectType({
name: 'meta',
fields: {
createdAt: {
type: GraphQLString
},
updatedAt: {
type: GraphQLString
})
let ListType = new GraphQLObjectType({
name: 'List',
fields: {
_id: {
type: GraphQLID
},
id: {
type: GraphQLString
},
title: {
type: GraphQLString
},
desc: {
type: GraphQLString
},
date: {
type: GraphQLString
},
checked: {
type: GraphQLBoolean
},
meta: {
type: objType
})
const listFields = {
type: new GraphQLList(ListType),
args: {},
resolve (root, params, options) {
return List.find({}).exec() // 数据库查询
let queryType = new GraphQLObjectType({
name: 'getAllList',
fields: {
lists: listFields,
})
export default new GraphQLSchema({
query: queryType
})
把增删查改都讲完再更改代码~ b. 实现增删查改
一开始说了，其实mutation和query用法上没什么区别，这只是一种约定。 具体的mutation实现方式如下：
const outputType = new GraphQLObjectType({
name: 'output',
fields: () => ({
id: { type: GraphQLString},
success: { type: GraphQLBoolean },
})
});
const inputType = new GraphQLInputObjectType({
name: 'input',
fields: () => ({
id: { type: GraphQLString },
desc: { type: GraphQLString },
title: { type: GraphQLString },
date: { type: GraphQLString },
checked: { type: GraphQLBoolean }
})
});
let MutationType = new GraphQLObjectType({
name: 'Mutations',
fields: () => ({
delOne: {
type: outputType,
description: 'del',
args: {
id: { type: GraphQLString }
},
resolve: (value, args) => {
console.log(args)
let result = delOne(args)
return result
},
editOne: {
type: outputType,
description: 'edit',
args: {
listObj: { type: inputType }
},
resolve: (value, args) => {
console.log(args)
let result = editOne(args.listObj)
return result
},
addOne: {
type: outputType,
description: 'add',
args: {
listObj: { type: inputType }
},
resolve: (value, args) => {
console.log(args.listObj)
let result = addOne(args.listObj)
return result
},
tickOne: {
type: outputType,
description: 'tick',
args: {
id: { type: GraphQLString },
checked: { type: GraphQLBoolean },
},
resolve: (value, args) => {
console.log(args)
let result = tickOne(args)
return result
},
}),
});
export default new GraphQLSchema({
query: queryType,
mutation: MutationType
})
c. 完善其余代码
在实现前端请求Graphql服务器时，最困扰我的就是参数以什么样的格式进行传递。后来在Graphql界面玩Graphql的query请求时发现了其中的诀窍…
关于前端请求格式进行一下说明： 如上图，在玩Graphql的请求时，我们就可以直接在控制台network查看请求的格式了。这里我们只需要模仿这种格式，当做参数发送给Graphql服务器即可。
记得用反引号： `` ，来拼接参数格式。然后用data: {query: params}的格式传递参数，代码如下：
let data = {
query: `mutation{
addOne(listObj:{
id: "${that.getUid()}",
desc: "${that.params.desc}",
title: "${that.params.title}",
date: "${that.getTime(that.params.date)}",
checked: false
}){
id,
success
}`
$.post('/graphql', data).done((res) => {
console.log(res)
// do something
})
最后更改server.js，router/index.js，controllers/list.js，public/index.js改成github项目对应目录的文件代码即可。
完整项目的目录如下：
五、后记
对于Vue开发者，可以使用vue-apollo使得前端传参更加优雅~
六、参考文献
graphql官网教程GraphQL.js30分钟理解GraphQL核心概念我的前端故事----我为什么用GraphQLGraphQL 搭配 Koa 最佳入门实践
__Charming__
关注
关注
92
点赞
354
收藏
打赏
36
评论
GraphQL入门有这一篇就足够了
本文将从GraphQL是什么，为什么要使用GraphQL，使用GraphQL创建简单例子，以及GraphQL实战，四个方面对GraphQL进行阐述。说得不对的地方，希望大家指出斧正。github项目地址：https://github.com/Charming2015/graphql-todolist一、GraphQL是什么?关于GraphQL是什么，网上一搜一大堆。根据官网的解释就是一...
复制链接
扫一扫
专栏目录
GraphQL及元数据驱动架构在后端BFF中的实践
qq_61890005的博客
11-17
36
商品展示场景的复杂性体现在：场景多、依赖多、逻辑多，以及不同场景之间存在差异。在这样的背景下，如果是业务初期，怎么快怎么来，采用“烟囱式”个性化建设的方式不必有过多的质疑。但是随着业务的不断发展，功能的不断迭代，以及场景的规模化趋势，“烟囱式”个性化建设的弊端会慢慢凸显出来，包括代码复杂度高、缺少能力沉淀等问题。本文以基于对美团到店商品展示场景所面临的核心矛盾分析，介绍了：业界不同的BFF应用模式，以及不同模式的优势和缺点。基于GraphQL BFF模式改进的元数据驱动的架构方案设计。
GraphQL入门基础篇教程
12-02
2841
目录
历史
是什么？
GraphQL和RESTful区别
区别说明：
举个使用场景说明两者差异：
RESTful实现方式：
GraphQL实现方式：
有什么用？
谁在用？
怎么用？
了解GrapQL规范
字段（Fields）
参数（Arguments）
别名（Aliases）
片段（Fragments）
Schema 和类型
标量类型（Scalar Types）
枚举类型（Enumeration Types）
接口（Interfaces）
创建第一个GraphQL
评论 36
您还未登录，请先
登录
后发表或查看评论
Learning GraphQL
06-04
learning graphql 最新英文版，graphql学习很好的教材，2019年新出的书。
graphql详解
weixin_30268071的博客
08-12
353
随着系统业务量的增大不同的应用和系统共同使用着许多的服务api，而随着业务的变化和发展，不同的应用对相同资源的不同使用方法最终会导致需要维护的服务api数量呈现爆炸式的增长，比如我试着跑了下我们自己业务里的接口数量，线上正在运行的就有超过1000多个接口，非常不利于维护。而另一方面，创建一个大而全的通用性接口又非常不利于移动端使用（流量损耗），而且后...
GraphQL 入门详解
全栈前端精选
07-31
1317
由于微信外链限制，推荐阅读等链接无法点击，可点击阅读原文跳转至原文，查看外链。作者：MudOnTiregithub 地址：https://github.com/MudOn...
restful api 与 GraphQL 分析比较
代码讲故事
06-08
1203
背景
REST作为一种现代网络应用非常流行的软件架构风格，自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性，可扩展性，伸缩性受到广大Web开发者的喜爱。
REST 的 API 配合JSON格式的数据交换，使得前后端分离、数据交互变得非常容易，而且也已经成为了目前Web领域最受欢迎的软件架构设计模式。
但随着REST API的流行和发展，它的缺点也暴露了出来：
•滥用REST接口，导致大量相似度很高（具有重复性）的API越来越冗余。
•对于前端而言
GraphQL 浅谈，从理解 Graph 开始
大转转FE
12-29
4162
前言GraphQL is a data query language developed internally by Facebook in 2012 before being publicly released in 2015. It provides an alternative to RESTful architectures. —— from wikipedia.GraphQL 是 Fac
GraphQL
深蓝旭的博客
11-29
2690
一、GraphQL简介
1、什么是GraphQL？
　　GraphQL官网：https://graphql.org/，这个是英文的，https://graphql.js.cool/这个是中文的。
　　GraphQL是一种用于API的查询语言。GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构...
GraphQL（一）基础介绍及应用示例
若明天不见
03-26
2198
本文为GraphQL的基础介绍及应用示例，主要介绍GraphQL的应用场景、优缺点及基础语法与使用。
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。
GraphQL实战-第一篇-GraphQL介绍
xplan5的博客
09-21
6202
GraphQL实战-GraphQL介绍
GraphQL的前世今生
Facebook的业务线有移动端，PC端和其它端，不同的场景下对一个资源所需要的信息是不同的。如移动端需要User的a、b、c三个字段，PC端需要b、c、d三个字段；对于此场景，要么开多个定制化API接口,会造成代码冗余，要么一个全信息API接口,有接口信息冗余。
造成了不止以下三个痛点
移动端需要高效的数据加载，被接口冗余字段拖累
多端产品下，API维护困难
前端新产品快速开发困难，需要大量的后端配合写业务定制化API
解决以上问题，2
GraphQL简介及入门
qqxhb 资源共享
09-02
1158
1、什么是GraphQL?
GraphQL 是由 Facebook 创造的用于描述复杂数据模型的一种查询语言。这里查询语言所指的并不是常规意义上的类似 sql 语句的查询语言，而是一种用于前后端数据查询方式的规范。官网（中文）：https://graphql.cn/；规范地址：http://spec.graphql.cn/。
2、RESTful存在的问题
RESTful是我们已经很熟悉的用于ap...
GraphQL学习第一篇 －GraphQL简介
越陌度阡
01-14
665
1. GraphQl 介绍
GraphQL 是一种新的 API 的查询语言，它提供了一种更高效、强大和灵活 API 查询。它 是由 Facebook 开发和开源，目前由来自世界各地的大公司和个人维护。GraphQL 对API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余。它弥补了 RESTful API(字段冗余，扩展性差、无法聚合 API、无法定......
你应该使用graphql
weixin_26755331的博客
09-02
78
At AH Technology we’re continuously looking for new technology to see if we can make our developers faster and happier, make our tech better or develop with more value for money. One of the proof of c...
GraphQL（二）Spring boot + Netflix DGS
最新发布
若明天不见
05-20
344
Spring boot + Netflix Domain Graph Service（DGS） + Apollo Federation
Netflix DGS根据GraphQl schema及对应实体类，加载模式并结合DataFetcher将对象的字段进行绑定，执行相应的逻辑
都快2022年了GraphQL还值得学吗？
kevin_tech的博客，微信搜「网管叨bi叨」
10-12
1877
GraphQL感觉前两年火过一小段时间，说是能让前端只取我所需，解决后端接口过多划分地过细的问题，再加上是Facebook出品确实吸引了一些开发者的关注，不过我还没来得及学，好像它就过气了...
GraphQL实战
fechinchu的博客
02-13
804
GraphQL实战
1.1.根据需求编写GraphQL文件
在resources目录下新建.graphqls文件
schema {
query: HaokeQuery
type HaokeQuery {
HouseResources(id:Long) : HouseResources
HouseResourcesList(page:Int, pageSize:Int)...
GraphQL 概念入门
07-05
324
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是什么,入门了解看这一篇就够了！
feiying
02-22
947
文章目录GraphQL产生背景GraphQL组成结构GraphQL执行原理GraphQL-restAPI对比部署架构服务端-DataFetcher一种实现方式graphql与Springboot集成大厂实践
GraphQL产生背景
GraphQL组成结构
GraphQL执行原理
https://graphql.cn/learn/execution/
https://www.graphql-tools.com/docs/introduction
GraphQL-restAPI对比
部署架构
https
深入理解 GraphQL
weixin_33835103的博客
03-15
141
0.引子
通过上一篇文章我们对 GraphQL 有了基础的了解。我们知道 GraphQL 使用 Schema 来描述数据，并通过制定和实现GraphQL 规范定义了支持 Schema 查询的 DSQL （Domain Specific Query Language，领域特定查询语言）。Schema 帮助将复杂的业务模型数据抽象拆分成细粒度的基础数据结构...
RESTful和GraphQL的比较
yuyongkun4519的博客
02-24
949
对于前后端分离的项目，后端通常把数据接口定义成RESTful API或者GraphQL，那么两者有什么不同呢？
一，RESTful API：
RESTful API常见的请求方式有get：查询数据；post：添加数据；put：更新数据；delete：删除数据
不足：
扩展性不足
一个接口有可能因为需求变更而变的越来越臃肿，比如获得用户信息的接口/user/userid，刚开始可能只...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：编程工作室
设计师：CSDN官方博客
返回首页
__Charming__
CSDN认证博客专家
CSDN认证企业博客
码龄5年
暂无认证
45
原创
19万+
周排名
49万+
总排名
31万+
访问
等级
2167
积分
66
粉丝
163
获赞
123
评论
568
收藏
私信
关注
分类专栏
gulp
1篇
npm
2篇
tinymce
1篇
docker
4篇
算法
17篇
python
4篇
前端
35篇
vue
5篇
数据
1篇
codewar
12篇
数论
2篇
工具
3篇
git
2篇
kibana
4篇
sass
1篇
单元测试
1篇
css
1篇
PWA
1篇
node
1篇
graphql
1篇
element
1篇
最新评论
GraphQL入门有这一篇就足够了
纸上浅陌:
现在这个代码会报错，需要将之expressGrapql改为{graphqlHTTP}，下面的app方法中同名，现在express-grapql暴露的是一个对象了，用解构赋值得到这个方法
基于Pierre Dellacherie算法实现俄罗斯方块的人工智能（python实现）《三》
cannonfodder9527:
博主你好，经过多次测试我发现总是会出现第一行（最底行）没法摆满的情况，请问加大什么参数的比重能保证第一行总是能摆满？
GraphQL入门有这一篇就足够了
小小热爱:
点击进包看看不就得了
GraphQL入门有这一篇就足够了
Sansa_stark:
还想请问一下为什么是graphiql而不是graphql呢？
GraphQL入门有这一篇就足够了
Sansa_stark:
难怪一直报错expressGraphql is not a function！棒(๑•̀ㅂ•́)و✧
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
利用yeoman搭建自己的脚手架
gulp入门
npx:调用项目内部安装的模块
2020年9篇
2019年4篇
2018年42篇
目录
目录
分类专栏
gulp
1篇
npm
2篇
tinymce
1篇
docker
4篇
算法
17篇
python
4篇
前端
35篇
vue
5篇
数据
1篇
codewar
12篇
数论
2篇
工具
3篇
git
2篇
kibana
4篇
sass
1篇
单元测试
1篇
css
1篇
PWA
1篇
node
1篇
graphql
1篇
element
1篇
目录
评论 36
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
__Charming__
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值