• 基本用法
  • GraphQL概述
    • GraphQL基本语法特性
    • GraphQL类型系统
    • GraphQL类型系统内置基础类型
    • GraphQL类型系统内置修饰符
    • GraphQL工作原理
    • GraphQL执行过程
  • Vue工程接入GraphQL

基本用法(如何去用)

package.json

"dependencies": {
"apollo-server-koa": "^1.3.6",
"graphql": "^0.13.2",
"graphql-import": "^0.6.0",
"graphql-tools": "^3.0.2",
"koa": "^2.5.1",
"koa-bodyparser": "^4.2.1",
"koa-router": "^7.4.0",
"koa-websocket": "^5.0.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
复制代码

server.js

import koa from 'koa'
import koaRouter from 'koa-router'
import koaBody from 'koa-bodyparser'
import websocketify from 'koa-websocket'
import { graphqlKoa, graphiqlKoa } from 'apollo-server-koa'
import { makeExecutableSchema } from 'graphql-tools' const app = websocketify(new koa())
const router = new koaRouter()
const PORT = 3000 // fake data
const moments = [
{
user: {
id: 1000,
name: '锐雯',
avatar: 'http://imgsrc.baidu.com/imgad/pic/item/42a98226cffc1e17d31927154090f603738de974.jpg'
},
main: {
content: '这是一条朋友圈',
pics: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529219875063&di=bc0bcc78ae800c1c21c198f52697f515&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4a36acaf2edda3ccd53548ea0be93901203f9223.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529219893624&di=8d9e418df27e1fdb6afb1d993801a980&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F3801213fb80e7beca9004ec5252eb9389b506b38.jpg'
]
},
comments: [
{
user: {
id: 233122,
name: '亚索'
},
reply: '面对疾风吧'
}
]
}
] const typeDefs = `
type Query {
moments: [Moment]
}
type Mutation {
addComment(
entity: Add_Comment
) : Comment
}
type Moment {
user: User
main: Main
comments: [Comment]
}
type User {
id: Int
name: String
avatar: String
}
type Comment {
user: User
reply: String
}
type Main {
content: String
pics: [String]
}
input Add_User {
id: Int
name: String
}
input Add_Comment {
user: Add_User
reply: String
} # 定义graphqlf服务哪个是RootQuery以及RootMutation
schema {
query: Query
mutation: Mutation
}
` const resolvers = {
Query: {
moments () {
return moments
}
},
Mutation: {
addComment (_, { entity }, unknown, context) {
console.log(entity)
moments[0].comments.push(entity)
return entity
}
}
} const schema = makeExecutableSchema({
typeDefs,
resolvers
}) // koaBody is needed just for POST.
router.post('/graphql', koaBody(), graphqlKoa({ schema: schema }))
// router.get('/graphql', graphqlKoa({ schema: schema })) router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' })) async function responseMiddleware(ctx, next) {
ctx.set('Access-Control-Allow-Origin', 'http://localhost:8080')
ctx.set('Access-Control-Allow-Methods', 'POST,OPTIONS')
ctx.set('Access-Control-Allow-Headers', 'authorization,content-type')
// ctx.set('Access-Control-Allow-Credentials', 'true')
await next()
} app.use(responseMiddleware)
app.use(router.routes())
app.use(router.allowedMethods()) app.ws.use(responseMiddleware)
app.ws.use(router.routes())
app.ws.use(router.allowedMethods()) app.listen(PORT)
复制代码

GraphQL概述

GraphQL基本语法特性

包括有fields,alias,arguments,fragments,variables,directives,inline fragments

  • field

GraphQL类型系统

主要由RootQuery + RootMutation两种入口类型(操作)加上RootValue(resolvers)构成GraphQL Schema。(此处用graphql-tools是为了将所有的类型定义在一个字符串中,后续会移到一个.graphql文件中,然后用graphql-import导入)

GraphQL类型系统内置基础类型

  • 标量类型(Scalar Types)

    • Int: 有符号的32位整数
    • Float: 有符号双精度浮点值
    • String: UTF-8字符序列
    • Boolean: true or false
    • ID:ID 标量类型表示一个唯一标识符(类似一种UUID),通常用以重新获取对象或者作为缓存中的键。ID 类型使用和 String 一样的方式序列化。
  • 枚举类型(Enumeration Types)

是一种特殊的标量类型

enum Episode {
NEWHOPE
EMPIRE
JEDI
}
复制代码
  • 数组类型(Array Types)

用方括号[]标记列表

  • 接口类型(Interface Types)

是一种抽象类型,与java的interface机制类似。

  • 联合类型(Union Types)
{
search(text: "an") {
... on Human {
name
height
}
... on Droid {
name
primaryFunction
}
... on Starship {
name
length
}
}
}
复制代码
  • 输入类型(Input Types)

与之前提到的所有Types对立,这是一种也是唯一一种输入类型,其主要用于mutations时传递整个对象的case,它没有参数。

内置修饰符

  • !: 表示非空。如下
query DroidById($id: ID!) {
droid(id: $id) {
name
}
}
复制代码

GraphQL工作原理

GraphQL中每个查询字段是返回子类型的父类型函数。每个类型的字段对应由一个resolver函数支持,当字段被执行时,响应的resolver被调用并return结果。

如果字段产生结果为标量类型值,比如字符串或数字,则执行完成。否则递归执行对应解析器直至结果为标量类型值。

GraphQL基本数据流

每个GraphQL服务端应用的顶层必定会有一个入口点,通常为Root或者Query类型,接着执行该字段预设的解析器(同步或异步),而每个字段被解析的结果被放置在键值映射中,字段名(或别名)作为键,解析器的值作为值,这个过程从查询字段的底部叶子节点开始返回,直到Query类型的起始节点,最后生成镜像查询结果返回给客户端

Vue工程接入GraphQL

安装vue-cli3.x

npm i -g @vue/cli
复制代码

初始化工程

vue create [project-name]
复制代码

引入apollo插件

cd [project-name]
vue add apollo
复制代码

FriendCircle.vue

<template>
<div>
<div v-for="(item, index) in moments" :key="index">
{{item}}
</div>
<input type="text" v-model="comment.reply" placeholder="请输入要回复的内容">
<button @click="addComment">回复</button>
</div>
</template> <script>
import gql from 'graphql-tag' const QUERY_LIST = gql`
query {
moments {
user {
id
name
avatar
}
main {
content
pics
}
comments {
user {
id
name
}
reply
}
}
}
` export default {
data () {
return {
moments: [],
comment: {
user: {
id: (Math.random() * 10000).toFixed(0),
name: '费德提克'
},
reply: ''
}
}
},
apollo: {
moments: {
query: QUERY_LIST
}
},
methods: {
addComment () {
this.$apollo.mutate({
mutation: gql`
mutation addComment($comment: Add_Comment) {
addComment(entity: $comment) {
user {
id
name
}
reply
}
}
`,
variables: {
comment: this.comment
},
update: (store, { data: { addComment } }) => {
// Read the data from our cache for this query.
const data = store.readQuery({ query: QUERY_LIST })
// set first moment's comment
data.moments[0].comments.push(addComment)
// Write our data back to the cache.
store.writeQuery({ query: QUERY_LIST, data })
}
})
}
}
}
</script>
复制代码

涉及的知识点有Root_Query,Root_Mutation,variables以及store cache

cache

其核心机制包括以下两点

  1. 对所有(包括嵌套的)非标量类型递归进行缓存,往往通过类型id或_id以及__typename唯一组合标识,然后在一个扁平的数据结构中存储
  2. 可以设置不同缓存策略:cache-and-network,no-cache,network-only

update回调

this.$apollo.mutate(options) options中有一个update回调,在成功响应数据后触发,并且可以直接读取并操作由apollo-cache-inmemory生成的store。上述例子中使用此回调同步更新缓存以及UI

注:所有绑定的变量均不可直接修改,内部使用Object.freeze将对象冻结,无法直接增删。

作者:清风0o0
链接:https://juejin.im/post/5b2640bee51d45588d4d68d2
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Vue + GraphQL初试的更多相关文章

  1. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  2. 1-VScode格式化ESlint-方法(最全最好用方法!)

    1-VScode格式化ESlint-方法(最全最好用方法!)   ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VSc ...

  3. vsCode格式化插件

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一 ...

  4. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  5. GraphQL & Apollo & Vue

    GraphQL & Apollo & Vue https://www.howtographql.com/vue-apollo/0-introduction/ https://githu ...

  6. 初试 Vue.js

    1.为什么我会想要来弄弄vue这个前端框架呢? 答:前段时间被小程序刷屏了,然后就去弄了一下小程序,嗯挺简单的:头脑一发热后就想到vue2也发布一段时间了,何不也来尝尝vue2.0的味道,最后发现它们 ...

  7. 初试vue

    Vue了解 """ vue框架 vue是前台框架:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式. ...

  8. Vue.js 基本功能了解

    一.写在前面 隔了这么久才来出Vue的第二篇文章,真是堕落了,自己先惩罚下/(ㄒoㄒ)/~~ 回过头看自己第一篇相关文章<初试 Vue.js>(http://www.cnblogs.com ...

  9. Vue跨门槛系列之实例的阐述

    学习.使用中结合vue官网的api和教程极佳! 前前篇文章上有提及到vue的简单介绍,详情请戳这里 (初试 Vue.js)  第一部分: 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue ...

随机推荐

  1. pid 及参数调试方法

    所谓PID指的是Proportion-Integral-Differential.翻译成中文是比例-积分-微分. 记住两句话: 1.PID是经典控制(使用年代久远) 2.PID是误差控制() 对直流电 ...

  2. sping boot 笔记

    参考  http://blog.csdn.net/catoop/article/details/50501664# 一.简介 Spring 官方网站本身使用Spring 框架开发,随着功能以及业务逻辑 ...

  3. PHP怎么实现字符串转义和还原?

    首先大家可以简单了解下什么是转义字符?有什么用? 转义字符是一种特殊的字符常量.转义字符以反斜线"\"开头,后跟一个或几个字符.转义字符具有特定的含义,不同于字符原有的意义,故称“ ...

  4. 010——C#选择文件路径

    (一)具体教程查看:011——C#创建ECXEL文件(附教程) (二)代码:foldPath 就是获取到的文件路径 private void button1_Click(object sender, ...

  5. 005_硬件基础电路_PCB安规设计规范

    包含两个文件:讲解pcb绘制过程中的安规要求 002_2_PCB安规设计规范(原创-绝对经典全面-玩转高压PCB设计)总结 002_3_电气间隙和爬电距离规定 链接:https://pan.baidu ...

  6. sparkStreaming 读kafka的数据

    目标:sparkStreaming每2s中读取一次kafka中的数据,进行单词计数. topic:topic1 broker list:192.168.1.126:9092,192.168.1.127 ...

  7. Scrapy不同的item指定不同的Pipeline

    scrapy不同的item指定不同的Pipeline from items import AspiderItem, BspiderItem, CspiderItem class myspiderPip ...

  8. java设计模式学习-单例模式

    java中单例模式定义:“一个类有且仅有一个实例,并且自行实例化向整个系统提供.”单例模式可以保证一个应用中有且只有一个实例,避免了资源的浪费和多个实例多次调用导致出错. 单例模式有以下特点: 1.单 ...

  9. zabbix(7)邮件报警配置

    邮件报警可以使用Linux自带邮件服务器(postfix等),也可以使用其他邮件服务器(像腾讯邮箱,126邮箱) 一.使用mail. 1.确定zabbix server是否安装发送邮件的命令mail, ...

  10. centos6下安装docker

    安装docker对内核版本的要求很高,需要内核3.10以上. 一.docker卸载 查看内核版本: 如果不升级内核到3.10安装docker,后面会有很多奇怪的问题,像我就是拉取不到镜像. 以下我是r ...