前端技术之:如何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年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
随机推荐
- 15.Python bool布尔类型
Python 提供了 bool 类型来表示真(对)或假(错),比如常见的5 > 3比较算式,这个是正确的,在程序世界里称之为真(对),Python 使用 True 来代表:再比如4 > 2 ...
- JSON格式标准
JSON格式 json的基本类型有objects(dicts), arrays(lists), strings, numbers, booleans, and nulls(json中关键字).在一个o ...
- SpringBoot启动时的Banner设置
Spring Boot程序启动的时候输出的由字符组成的Spring符号并不陌生.这个是Spring Boot为自己设计的Banner: 1. 第一种方式:修改的时候,进行设置,在Application ...
- 关于MySQL中查询结果的count和from后的条件与where后的条件对比
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 ...
- 后盾网lavarel视频项目---3、lavarel中子控制器继承父控制器以判断是否登录
后盾网lavarel视频项目---3.lavarel中子控制器继承父控制器以判断是否登录 一.总结 一句话总结: 在common控制器的构造方法中验证登录中间件,其它的控制器继承common控制器 p ...
- js对数组分组处理
一.js数组分组 1.js对数据分组类似group by 源码如下: <!DOCTYPE html> <html lang="en"> <head&g ...
- leetcode 139 单词拆分(word break)
一开始的错误答案与错误思路,幻想直接遍历得出答案: class Solution { public: bool wordBreak(string s, vector<string>& ...
- Git - p4merge
Windows 下配置 先确保 p4merge 的路径(默认:C:\Program Files\Perforce\)在环境变量中 C:\Users\zjffu>where p4merge C:\ ...
- 代码实现:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。
package com.loaderman.Coding; import java.util.Scanner; /*利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分 ...
- 【flask】处理表单数据
表单数据的处理涉及很多内容,除去表单提交不说,从获取数据到保存数据大致会经历以下步骤: 解析请求,获取表单数据. 对数据进行必要的转换,比如将勾选框的植转换为Python的布尔值. 验证数据是否符合 ...