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

基本用法(如何去用)

package.json

server.js

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)

是一种特殊的标量类型

  • 数组类型(Array Types)

用方括号[]标记列表

  • 接口类型(Interface Types)

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

  • 联合类型(Union Types)

  • 输入类型(Input Types)

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

内置修饰符

  • !: 表示非空。如下

GraphQL工作原理

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

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

GraphQL基本数据流

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

Vue工程接入GraphQL

安装vue-cli3.x

初始化工程

引入apollo插件

FriendCircle.vue

涉及的知识点有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将对象冻结,无法直接增删。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据