GraphQL 渐进学习 06-graphql-采用-mockjs-mock数据
GraphQL 渐进学习 06-graphql-采用-mockjs-mock数据
目标
- 开启
graphqlmock数据模式 - 采用
mock.js组件进行数据模拟 - 模拟数据配置
- 对象
- 接口
- 自定义类型
- 联合
- 查询
代码
- graphQL-example/mock.js
步骤
1. 安装 mock.js 依赖包
npm -S install mockjs- 1
3. import 所需包对象
import {makeExecutableSchema, addMockFunctionsToSchema, MockList} from 'graphql-tools'
import {graphql, GraphQLScalarType} from 'graphql'
import Mock from 'mockjs'
const Random = Mock.Random- 1
- 2
- 3
- 4
addMockFunctionsToSchema合成模拟函数MockList指定模拟数据条数Mock模拟数据生成对象
3. 编写 typeDefs
const typeDefs = `scalar Datetype User {id: Intname: Stringposts(limit: Int): [Post]}type Post {id: Inttitle: Stringviews: Intauthor: User}interface Message {content: String}type Notice implements Message {content: StringnoticeTime: Date}type Remind implements Message {content: StringendTime: Date}type Query {aString: StringaBoolean: BooleananInt: Intmy: [User]author(id: Int): UsertopPosts(limit: Int): [Post]notices: [Notice]}type Mutation {addUser: User}
`- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 定义中有
自定对象接口类型查询更新，复合普遍情况
4. 编写 typeResolvers
const typeResolvers = {Message: {__resolveType(data) {return data.typename // typename property must be set by your mock functions}},Date: new GraphQLScalarType({name: 'Date',description: 'Date custom scalar type',parseValue(value) {return new Date(value) // value from the client},serialize(value) {// return new Date(value).getTime()return new Date(value) // value sent to the client},parseLiteral(ast) {if (ast.kind === Kind.INT) {return parseInt(ast.value, 10) // ast value is always in string format}return null}})
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
* 接口 联合 自定义类型 需要编写 typeResolvers 对象 *
5. 合并 Schema
const schema = makeExecutableSchema({typeDefs,typeResolvers,resolverValidationOptions: {requireResolversForResolveType: false}})- 1
- 2
- 3
- 4
- 5
- 6
6. 编写模拟数据
const min = 100
const max = 99999
const mocks = {Int: () => Random.natural(min, max),Float: () => Random.float(min, max),String: () => Random.ctitle(10, 5),Date: () => Random.time(),User: () => ({id: Random.natural(min, max),name: Random.cname(),posts: () => new MockList([6, 12]),}),
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
可以发现都是对类型进行定义
MockList([6, 12])表示模拟 6 ~ 12 条数据mock.js语法请移步 Mock.js/Random
7. 开启模拟方式
addMockFunctionsToSchema({schema, mocks, preserveResolvers: true})- 1
- 没有看错就是一行代码
测试
1. 请求 addUser 方法
# 请求
mutation {addUser {idname}
}# 输出
{"data": {"addUser": {"id": 61700,"name": "蔡杰"}}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
2. 请求 me 查询
# 请求
{my {idnameposts {idtitle}}
}# 输出
{"data": {"my": [{"id": 10861,"name": "林霞","posts": [{"id": 5295,"title": "老学通阶本照机世"},{"id": 74760,"title": "劳报办划说团可向代"},{"id": 96701,"title": "那管己单等半做状基"},{"id": 57025,"title": "值前真水员般两据和"},{"id": 15801,"title": "克文实验很即手边物"},{"id": 80493,"title": "强统消权红方"}]},{"id": 22464,"name": "萧超","posts": [{"id": 45890,"title": "子争安能军"},{"id": 6975,"title": "年阶高战思与称统争"},{"id": 52466,"title": "长需准之确"},{"id": 35372,"title": "手备造方专样反则"},{"id": 98486,"title": "种观点听进段周"},{"id": 35529,"title": "名据级个况交各"},{"id": 40534,"title": "要也义理平示家治"},{"id": 57121,"title": "观如王部被关约法"},{"id": 29170,"title": "求经风断治往市程"},{"id": 36344,"title": "器队热农时斯心"}]}]}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
参考
graphql-tools/mocking
Mock.js/Random
GraphQL 渐进学习 06-graphql-采用-mockjs-mock数据相关推荐
- GraphQL 渐进学习 07-graphql-node-server-模块化
GraphQL 渐进学习 07-graphql-node-server-模块化 目标 为了便于维护,模块化 node 服务端 代码 代码抽取层次分为 schema 定义 类型 业务对象 查询 更改 r ...
- GraphQL 渐进学习 09-graphql-apollo-client-vue-客户端开发
GraphQL 渐进学习 09-graphql-apollo-client-vue-客户端开发 软件环境 vue > 2.5.x 目标 创建 graphql 客户端 封装请求处理 基于 toke ...
- Android学习笔记---19_采用ListView实现数据列表显示,以及各种适配器使用,和如何写自己的适配器
19_采用ListView实现数据列表显示 -------------------------------------------------- ListView显示界面的设置: -------- ...
- STM32学习之串口采用DMA收发数据：需要利用状态机加DMA加串口
写在前面 在学习这一节知识点的时候,真的是感觉太抽象了,没有一个合适的视频讲的我有那种豁然开朗的感觉,直到我看到了这篇文章,大家可以去看看,里面的描述特别形象. 链接:https://blog.csd ...
- GraphQL实战-第一篇-GraphQL介绍
GraphQL实战-第一篇-GraphQL介绍 GraphQL的前世今生 Facebook的业务线有移动端,PC端和其它端,不同的场景下对一个资源所需要的信息是不同的.如移动端需要User的a.b.c ...
- Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论
Java虚拟机JVM学习06 自定义类加载器 父委托机制和命名空间的再讨论 创建用户自定义的类加载器 要创建用户自定义的类加载器,只需要扩展java.lang.ClassLoader类,然后覆盖它的f ...
- ThinkPhp学习06
原文:ThinkPhp学习06 一.简单学习修改用户信息模块 1.编写UserAction.class.php 1 <?php 2 3 class UserAction extends Acti ...
- mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
- [GAN学习系列3]采用深度学习和 TensorFlow 实现图片修复(下）
这是本文的最后一部分内容了,前两部分内容的文章: [GAN学习系列3]采用深度学习和 TensorFlow 实现图片修复(上) [GAN学习系列3]采用深度学习和 TensorFlow 实现图片修复( ...
最新文章
- LeetCode 547. Friend Circles--Python解法--笔试算法题
- python写软件-Python是怎么编写软件的?
- java之前后端交互原理
- vue按钮字体大小设置_vue-elementui之按钮
- MySQL之优化器、执行计划、简单优化
- 前端学习（1260）:promise中的常见api对象方法
- Python之list对应元素求和
- sql并行查询oracle,oracle 查看并行sql语句的并行数量
- matlab 开采沉陷 何,MATLAB在开采沉陷预计可视化中的应用
- mysql5.6开启binlog日志
- Pwn2Own黑客大赛战况：iPhone 20秒被黑
- ubuntu16.04 安装完显卡驱动后分辨率固定640x480 解决
- 计算机boot进入u盘启动,电脑boot设置U盘启动项具体方法
- Win10如何关闭自动更新
- PV,UV,VV,IP
- BusyBox v1.22.1 (Ubuntu 1:1.22.0-15ubuntu1) built-in shell (ash) 开机黑屏
- 网站安全公司waf防火墙的作用分析
- 使用Atmel ICE通过SWD接口调试Arduino MKR-WiFi-1010开发板
- WiFi密码忘记？电脑密码忘记？
- thirteen——sed