GraphQL 渐进学习 06-graphql-采用-mockjs-mock数据
目标
- 开启
graphqlmock数据模式 - 采用
mock.js组件进行数据模拟 - 模拟数据配置
- 对象
- 接口
- 自定义类型
- 联合
- 查询
代码
步骤
1. 安装 mock.js 依赖包
npm -S install mockjs
3. import 所需包对象
import {makeExecutableSchema, addMockFunctionsToSchema, MockList} from 'graphql-tools'
import {graphql, GraphQLScalarType} from 'graphql'
import Mock from 'mockjs'
const Random = Mock.Random
addMockFunctionsToSchema合成模拟函数MockList指定模拟数据条数Mock模拟数据生成对象
3. 编写 typeDefs
const typeDefs = `
scalar Date
type User {
id: Int
name: String
posts(limit: Int): [Post]
}
type Post {
id: Int
title: String
views: Int
author: User
}
interface Message {
content: String
}
type Notice implements Message {
content: String
noticeTime: Date
}
type Remind implements Message {
content: String
endTime: Date
}
type Query {
aString: String
aBoolean: Boolean
anInt: Int
my: [User]
author(id: Int): User
topPosts(limit: Int): [Post]
notices: [Notice]
}
type Mutation {
addUser: User
}
`
- 定义中有
自定对象接口类型查询更新，复合普遍情况
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
}
})
}
** 接口 联合 自定义类型 需要编写 typeResolvers 对象 **
5. 合并 Schema
const schema = makeExecutableSchema({
typeDefs,
typeResolvers,
resolverValidationOptions: {
requireResolversForResolveType: false
}})
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]),
}
),
}
可以发现都是对类型进行定义
MockList([6, 12])表示模拟 6 ~ 12 条数据mock.js语法请移步 Mock.js/Random
7. 开启模拟方式
addMockFunctionsToSchema({schema, mocks, preserveResolvers: true})
- 没有看错就是一行代码
测试
1. 请求 addUser 方法
# 请求
mutation {
addUser {
id
name
}
}
# 输出
{
"data": {
"addUser": {
"id": 61700,
"name": "蔡杰"
}
}
}
2. 请求 me 查询
# 请求
{
my {
id
name
posts {
id
title
}
}
}
# 输出
{
"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": "器队热农时斯心"
}
]
}
]
}
}
