GraphQL——由Facebook创建的接口规范，用于API的查询，为前后端数据交互提供了新的查询方式。
一、RESTFul的痛点
1、面对复杂场景的API粒度设计问题
在多端应用开发需求时，如Web、App、小程序... Web页面所需的描述字段往往更多一点，为满足web页面的接口需求，对于App/小程序而言，接口字段是冗余的，这就造成了流量浪费、产生性能问题~ 同理，为了提高加载速度，通过合并减少请求次数的方式，也会生成同样问题。
-
粗粒度设计
流量性能浪费：造成移动端不必要的流量损耗； -
细粒度设计
大量接口产生：不同端、不同页面、不同接口、同一页面多次请求造成函数爆炸；
2、API版本规划问题
接口字段等可能变动，之类的版本迭代问题
3、双向通讯的需求
由于http只能由浏览器向服务器单向推送消息，如股票等信息实时推送、支付等功能无法实现，虽然可以通过websocket实现，但不同的通信协议，接口规范无法统一表现风格
4、对于组件需要各自管理状态的难点
目前程序通常都是通过使用统一状态管理工具，对于实现组件各自的状态管理这种新的编码风格相对比较麻烦。
二、三个核心功能及工作方式
- Queries ：提供查询类接口
- Mutations: 处理状态的变化
- Subscriptions: 订阅后端状态变化、通知前端
1、Queries功能很类似解构赋值
query {
hello,
hi: hello, // 前端可以通过别名使用
books(id:'1'), // 只从books中查找到id为1的数据
books(id:'1'){ // 只从books中查id为1的date、author
date,
author
}
}
任意字段、对应别名均可自由定制，从而能避免接口版本更新问题，前端不会受后端接口版本变化而影响。
2、Mutations主要处理增删改逻辑
mutation {
createBook( name:'创建新书', author:'作者' ) {
id // id等其他信息
}
}
3、Subscriptions前端订阅后端发送的消息
subscription{
subsBooks
}
前端可以自由定制接口，后端可以按需返回，基于websocket实现的。
三、开发后端程序主要用Apollo Server框架
Apollo Server可以单独作为服务器，也可以作为Express、Koa的插件被使用。实例基础：
const { ApolloServer,gql } = require('apollo-server');
// Schema_gql接口定义
const typeDefs = gql`
type Query {
hello: String
}
`
// 解释器的实现
const resolvers = {
Query: {
hello: ()=>'Hello World'
}
}
// 创建服务器实例
const server = new ApolloServer({typeDefs,resolvers});
// 启动
server.listen().then( ({url}) => { console.log('运行会重新启动playground') } );
详例开发图书的查询接口:
const { ApolloServer,gql } = require('apollo-server');
// Schema_gql接口定义
const typeDefs = gql`
type Query {
book: [Book], // Book为新的自定义类型
books( id:String ):Book
}
type Book {
id: String,
name: Sting,
author: String
}
type Mutation {
createBook( name:String, author:String ): Books!, // 必须返回
clearBook: Boolean // 是否清空成功
}
`
// 创建数据_Book列表，是一个匿名函数
const books = ( ()=>{
Array(6).fill()
.map( (v,i)=>({
id: 'book'+i,
name: 'Name'+i,
author: 'Author'+i
}) )
} )();
// 解释器的实现
const resolvers = {
Query: {
// hello: ()=>'Hello World'
books: ()=> books,
book: ( parent,{id} )=>{
return books.find( v=> v.id===i );
}
},
Mutation: {
createBook: ( parent,args ) => {
const book = { ...args,id:books.length+1+''};
books.push(book);
return book;
},
clearBook: () => {
books.length = 0;
return true;
}
}
}
// 创建服务器实例
const server = new ApolloServer({typeDefs,resolvers});
// 启动
server.listen().then( ({url}) => { console.log('运行会重新启动playground') } );
Subscription的用法：
const { PubSub, withFilter} = require('apollo-server');
// PubSub为订阅发布模式
const typeDefs = gql`
type Subscription{
subsBook: Boolean
}
`
// 创建订阅发布实例
const pubsub = new PubSub();
// 解释器中添加
const resolvers = {
Subscripion: {
subsBooks:{
subscribe: withFilter(
( parent, variables ) => pubsub.asyncIterator('UPDATE_BOOK'),
() => true // 过滤UPDATE_BOOK消息、发布true
)
}
},
// 发布消息订阅在Mutation中
Mutation: {
createBook: ( parent,args ) => {
const book = { ...args,id:books.length+1+''};
books.push(book);
pubsub.publish('UPDATE_BOOK',{
subsBooks: true
})
return book;
},
}
}
四、前端调用订阅（示React用法）
import React from 'react';
import { useMutation } from '@/apollo/react-hooks'; // 借用useMutation钩子实现
import { gql } from 'apollo-boost';
// 第一个查询
const CREATE_BOOK = gql`
mutation CreateBook( $name: String!, $author: String! ){
createBook( name: $name, author: $author ){
id,
name,
author
}
}
`
// 第二个查询
const CLEAR_BOOK = gql`
mutation {
clearBook
}
`
// 创基函数式组件
function Mutation {
// 导出create、clear方法，执行时会调用mutation向后端创建数据
const [ create, {data} ] = useMutation(CREATE_BOOK);
const [ clear ] = useMutation(CLEAR_BOOK);
// 页面且放两个按钮
return (
<div>
{/* 每次点击都会创建新数据 */}
<form onSubmit={ e=> {
e.preventDefault();
create({
variables:{
'name': 'Name' + ( Math.random()*100 ).toFixed(),
'author': 'Author' + ( Math.random()*100 ).toFixed()
}
})
} }></form>
<button onClick = {clear}> Clear </button>
</div>
)
}
export default Mutation;
五、使用
引入Mutation控件、<Mutation></Mutation>加载即可
用声明式数据管理取代统一管理的方式，可以使用useSubscription钩子实现数据订阅，为前后端交互提供新的可能，在每个组件内部订阅数据的状态，写法更简单明确、用法更容易~
网友评论