// 第一步:引入所依赖的库
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接口数据的更多相关文章

  1. 前端模拟(mock)接口数据(koa)

    在前后端分离开发项目时,经常会有前后端进度不一致,可能前端界面开发已经完成,就等接口了,如果等接口出来再联调的话时间可能会来不及. 这个时候,前端就可以根据制定好的接口规范和接口文档来mock接口数据 ...

  2. vue mock 模拟接口数据

    日常总结 希望能帮到大家 1 mock/sever.js  //创建服务 let http=require('http') let fs=require('fs') let url=require(' ...

  3. 【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例

    基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院  欧浩源 1.案例背景 在本博客的<[CC2530入门教程-06]CC2530的ADC工作原理与应用>中实现了电压数据采集的 ...

  4. Mock接口数据 = mock服务 + iptable配置

    一.mock接口数据应用场景: 1.测试接口A,A接口代码中调用其他服务的B接口,由于开发排期.测试环境不通等原因,依赖接口不可用 2.测试异常情况,依赖接口B返回的数据格式不对.返回None.超时等 ...

  5. 2019年一半已过,这些大前端技术你都GET了吗?- 下篇

    在上一篇文章中已经介绍了大前端关于状态管理.UI组件.小程序.跨平台和框架层的内容.在本文中,我会继续介绍编程语言.工程化.监控.测试和服务端,同时也会对下半年大前端可以关注的部分进行展望. 结合个人 ...

  6. 解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

    引言 进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也 ...

  7. web前端技术体系大全

    一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com ...

  8. Web前端技术体系大全搜索

    一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com ...

  9. 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

随机推荐

  1. sublime text 3设置

    Sublime text 3 中文文件名显示方框怎么解决? 如图,中文文件名打开全是乱码,内容倒是装了converttoutf8没什么太大的问题. 作者:凝空虚步链接:https://www.zhih ...

  2. vue-cli的基础构造

    1,项目目录 2, bulid 下文件及目录 3,config下文件及目录 接下来说说vue-cli项目中页面相关的主要文件^o^ 首先是index.html: 说明:一般只定义一个空的根节点,在ma ...

  3. DVWA--CRSF

    首先我们对CRSF进行一个介绍 CSRF,全称Cross-site request forgery,翻译过来就是跨站请求伪造,是指利用受害者尚未失效的身份认证信息(cookie.会话等),诱骗其点击恶 ...

  4. [CSP-S模拟测试]:开心的金明(贪心+模拟)

    题目传送门(内部题117) 输入格式 第一行一个整数$k$,表示需要处理的月份数. 接下来的$k$行,每行$4$个整数,第$1+i$行分别为:$c_i,d_i,m_i,p_i$ 接下来的$k-1$行, ...

  5. win7系统安装Mysql5.7

    1.下载mysql的zip包 把zip包解压到指定的目录,目录不能有中文和空格 2.进入%mysql%目录(注:%mysql%是解压目录,我的是:D:\JavaTool\mysql) 在%mysql% ...

  6. 前端MVC、MVVM的简单实现

    MVC MVC是一种设计模式,它将应用划分为3个部分:数据(模型).展示层(视图)和用户交互层.结合一下下图,更能理解三者之间的关系.换句话说,一个事件的发生是这样的过程 用户和应用交互 控制器的事件 ...

  7. Miniui 表单验证

    自定义表单验证: input输入框的表单验证可通过vtype和onvalidation事件两种方式实现 可编辑列表(例如div)的表单验证只能通过vtye来实现表单验证 (1)vtype方式: jsp ...

  8. SQL Server AlwaysOn原理简介

    SQL Server2012所支持的AlwaysOn技术集中了故障转移群集.数据库镜像和日志传送三者的优点,但又不相同.故障转移群集的单位是SQL实例,数据库镜像和日志传送的单位是单个用户数据库,而A ...

  9. 如何解决Struts2和Servlet共存问题

    我之前用Servlet写过二维码扫描登录,结果把它整合到ssh框架中,发现Servlet和Struts存在共存问题,这是因为当我们在页面在请求应用时,struts2将会截获所有请求,对于servlet ...

  10. OpenCV学习笔记(6)——几何变换

    对图像进行各种变换,如移动,旋转,仿射变换等 变换 opencv提供了两个变换函数cv2.warpAffine cv2.warpPerspective使用这两个函数你可以实现所有类型的变换.前者接收的 ...