前端技术之:如何Mock GraphQL接口数据
// 第一步:引入所依赖的库
const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');
const { graphql } = require('graphql');
// 第二步:定义GraphQL Schema
const schemaString = `
type User {
id: ID,
name: String,
age: Int,
address: String
}
type Query {
user: User
}
`;
// 样例数据
const user = { id: 1, name: 'zhang' };
// 第三步:定义Resolver
const resolvers = {
Query: {
user: () => user
}
};
// 第四步:调用makeExecutableSchema函数生成Schema对象
const schema = makeExecutableSchema({ typeDefs: schemaString, resolvers });
// 第五步:也是重要的一步,调用addMockFunctionsToSchema函数mock Schema
addMockFunctionsToSchema({
schema,
mocks: {
Int: () => 6,
Float: () => 22.1,
String: () => 'Hello'
}
});
// 第六步:也是最后一步,查询并验证结果
const query = `
query tasksForUser {
user {
id,
name,
age,
address
}
}
`;
graphql(schema, query).then(result => console.log('Got result', result));
// 参考资料网址: https://www.apollographql.com/docs/graphql-tools/mocking/
前端技术之:如何Mock GraphQL接口数据的更多相关文章
- 前端模拟(mock)接口数据(koa)
在前后端分离开发项目时,经常会有前后端进度不一致,可能前端界面开发已经完成,就等接口了,如果等接口出来再联调的话时间可能会来不及. 这个时候,前端就可以根据制定好的接口规范和接口文档来mock接口数据 ...
- vue mock 模拟接口数据
日常总结 希望能帮到大家 1 mock/sever.js //创建服务 let http=require('http') let fs=require('fs') let url=require(' ...
- 【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例
基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院 欧浩源 1.案例背景 在本博客的<[CC2530入门教程-06]CC2530的ADC工作原理与应用>中实现了电压数据采集的 ...
- Mock接口数据 = mock服务 + iptable配置
一.mock接口数据应用场景: 1.测试接口A,A接口代码中调用其他服务的B接口,由于开发排期.测试环境不通等原因,依赖接口不可用 2.测试异常情况,依赖接口B返回的数据格式不对.返回None.超时等 ...
- 2019年一半已过,这些大前端技术你都GET了吗?- 下篇
在上一篇文章中已经介绍了大前端关于状态管理.UI组件.小程序.跨平台和框架层的内容.在本文中,我会继续介绍编程语言.工程化.监控.测试和服务端,同时也会对下半年大前端可以关注的部分进行展望. 结合个人 ...
- 解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)
引言 进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也 ...
- web前端技术体系大全
一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com ...
- Web前端技术体系大全搜索
一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com ...
- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
随机推荐
- win10 exe如何添加或禁用开机自启动项
一.添加开机自启动 1,先打开存放自启动软件文件的文件夹 方法①:在文件搜索框中输入或粘贴以下地址: C:\ProgramData\Microsoft\Windows\Start Menu\Progr ...
- Oracle 监听hang住
1.数据库正常启动: [oracle@db ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Sat Aug 24 ...
- Java 内部类、成员类、局部类、匿名类等
Java各种称呼类详解 Java有各种各样类,内部类.嵌套类.成员类.局部类(本地类).静态类.匿名类.文件类以及这些组合起来的称呼类,成员内部类,成员匿名类,成员嵌套类,本地匿名类等,真是多的不行, ...
- oracle判断一个字段为空
比如 insert into table a (a1,b1)values("a1",''); 对于这种情况,因为表里存的是'',其实是没有内容的,要查询这个字段,不能直接使用 se ...
- HomeBrew安装MongoDB如何启动
1.先安装HomeBrew 安装(需要 Ruby): ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/in ...
- Zookeeper 选举过程
Zookeeper 选举过程 问题 选举过程 服务器之间是怎么通信的? 答:QuorumCnxManager使用TCP-socket实现选举过程中的连接通信 Leader的选举过程在什么时候实现? L ...
- git 指定自己的sshkey
在服务器上生成ssh-key以后,需要把公钥放在github上,但是,这个公钥只能放在一个账户里,如果放在第二个账户里,就会提示这个key已经被用了,这是前提 一个可能的场景是这样的: 你们公司有好几 ...
- 复制表结构和数据SQL语句(转)
http://www.cnblogs.com/zhengxu/articles/2206894.html 1.复制表结构及数据到新表 CREATE TABLE 新表 SELECT * FROM 旧表 ...
- hdjs---laravel 框架使用hdjs 实现多图上传功能
hdjs---laravel 框架使用hdjs 实现多图上传功能 一.总结 一句话总结: [在网上找hdjs的使用实例]和[能遇见讲hdjs的视频],也是完全搞懂hdjs的不错的方式 1.hdjs中的 ...
- win下gvim或者linux下的vim安装vundle都适用的配置文件 - 在当前目录及其子目录下**, 的所有文件* 中, 搜索当前光标所在的单词
gvim下的普通配置: if v:lang =~ "utf8$" || v:lang =~ "UTF-8$" set fileencodings=utf-8,g ...