// 第一步:引入所依赖的库
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. 杜教筛&min_25筛复习

    杜教筛 适用条件 你要能构造出\(g(x),h(x)\),使得\(h=f*g\). \(G(x),H(x)\)的值可以快速计算. 过程 我们要求的是\(F(n)=\sum_{i=1}^{n}f(i)\ ...

  2. 分治NTT:我 卷 我 自 己

    感觉这种东西每次重推一遍怪麻烦的,就写在这里了. 说白了就是根据分治区间左端点是否为\(0\)分类讨论一下,一般是如果不是\(0\)就要乘\(2\),不过还是需要具体问题具体分析一下才好(就比如下面的 ...

  3. 事件总线(EventBus)

    Vue.prototype.$EventBus = new Vue() 不建议用,尽量用vuex,eventbus过于消耗浏览器资源 傻瓜版状态管理 一般的状态传递是在同时显示的情况下,倘若是在不同时 ...

  4. idea 下运行安卓项目

    修改 gralde 路径修改安卓sdk路径进入project structure 设置 Project settings / Project /project SDK 选择 Android API 2 ...

  5. C++入门经典-例2.14-使用移位运算

    1:代码如下: // 2.14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  6. LeetCode 2. 两数相加(Add Two Numbers)

    题目描述 给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入: ...

  7. 怎样用 Bash 编程:语法和工具

    让我们通过本系列文章来学习基本的 Bash 编程语法和工具,以及如何使用变量和控制运算符,这是三篇中的第一篇. Shell 是操作系统的命令解释器,其中 Bash 是我最喜欢的.每当用户或者系统管理员 ...

  8. WPF图标拾取器

    <Grid x:Name="LayoutRoot"> <Border BorderBrush="> <Border.Effect> & ...

  9. 域名查询是否注册的demo

    import json import multiprocessing import threading import requests import xmltodict # 万网查询 def chec ...

  10. 使用PowerShell远程连接WinServer

    最近做一个项目后台,涉及到多台服务器,当程序更新的时候,由于用的是WinServer,无法像Linux使用SSH批量更新,用Windows的mstsc的远程一个一个连接又太麻烦了.查找了一下资料,发现 ...