Graphql mock 方案

GraphQL API 的强类型本质非常适合模拟。模拟是 GraphQL Code-First 开发过程的重要组成部分,它使前端开发人员能够构建 UI 组件和功能,而无需等待后端实现。

我们期望基于 TS 强类型定义的特点以及中后台常见列表、详情的数据类型共性,实现对 GraphQL API 的数据 mock,减少手写 mock 每个 API 数据。

手写 mock  举例:           

 const list = new UserList()list.data = Array(10).fill(1).map((_, i) => {const item = new UserInfo()item.id = new Int64(i)...}

期望通过统一的 mock API

  • 减少对每个API 数据的手动 mock
  • 与 dto 中的类型定义完全一致,从而避免了手写时的误写

基于此,调研到以下三种方案:

方案1:  使用 graphql-tools 进行 mock
// https://graphql.cn/blog/mocking-with-graphql/ 文档demo
// > npm install graphql-toolsimport { mockServer } from 'graphql-tools';
import from './mySchema.graphql';const myMockServer = mockServer(schema);
myMockServer.query(`{allUsers: {idname}
}`);// returns
// {
//   data: {
//     allUsers:[
//       { id: 'ee5ae76d-9b91-4270-a007-fad2054e2e75', name: 'lorem ipsum' },
//       { id: 'ca5c182b-99a8-4391-b4b4-4a20bd7cb13a', name: 'quis ut' }
//     ]
//   }
// }
  • 另一种实现方式
import { graphql } from 'graphql'
import { addMocksToSchema } from '@graphql-tools/mock'
import { makeExecutableSchema } from '@graphql-tools/schema'// Fill this in with the schema string
const schemaString = `...`// Make a GraphQL schema with no resolvers
const schema = makeExecutableSchema({ typeDefs: schemaString })// Create a new schema with mocks
const schemaWithMocks = addMocksToSchema({ schema })const query = /* GraphQL */ `query tasksForUser {user(id: 6) {idname}}
`graphql({schema: schemaWithMocks,source: query
}).then(result => console.log('Got result', result))
方案2:  ts定义 => json schema => mock 数据
  • ts定义 => json schema => mock 数据(利用现成库)
方案3:  通过解析 Class 生成 mock 数据
  • 使用 Reflect 获取 class 类中的元数据信息,结合 mockjs 库生成模拟数据

参考链接:

https://github.com/ducafecat/graphQL-example/blob/master/src/mock.js

  • Mocking (GraphQL-Tools)
  • 安全验证 - 知乎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/820996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HG泄露(ctfhub)

工具准备:dirsearch、dvcs-ripper 网络安全之渗透测试全套工具篇(内含安装以及使用方法)_dvcs-ripper-CSDN博客 dvcs-ripper:一款perl的版本控制软件信息泄露利用工具,支持bzr、cvs、git、hg、svn... tree //树状…

APP开发_Android 与 js 互相调用

1 js 调用 Android 方法 当使用 JavaScript 调用 Android 原生方法时,主要涉及到 Android 的 WebView 组件,它允许你在 Android 应用中嵌入网页内容,并提供了 JavaScript 与 Android 代码交互的能力。 (1)创建JavaSc…

项目升级到jdk21后 SpringBoot相关组件的适配

了解到jdk21是一个LTS版本,可以稳定支持协程的功能。经过调研,将目前线上的jdk8升级到21,使用协程提升并发性能。 目前系统使用springBoot 2.0.3.RELEASE,并且引入了mybatis-spring-boot-starter、spring-boot-starter-data-redi…

【电控笔记2.3】速度回路+系统延迟

2.3.1速度回路pi控制器设计 pi伯德图近似设计(不考虑延时理想情况下) Tl:负载转矩 PI控制器的转折频率:Ki/Kp

VScode插件发布

背景 上期在初涉 VS Code 插件开发-CSDN博客中,通过Yeoman工具创建了第一个插件项目,在helloworld的基础上修改,实现预期的功能后,需要将VScode插件发布到插件市场中使用。 官方文档:Publishing Extensions | Visual…

【C语言】带你完全理解指针(六)指针笔试题

目录 1. 2. 3. 4. 5. 6. 7. 8. 1. int main() {int a[5] { 1, 2, 3, 4, 5 };int* ptr (int*)(&a 1);printf("%d,%d", *(a 1), *(ptr - 1));return 0; } 【答案】 2,5 【解析】 定义了一个指向整数的指针ptr,并将其初始化为&…

Angular 使用DomSanitizer防范跨站脚本攻击

跨站脚本Cross-site scripting 简称XSS,是代码注入的一种,是一种网站应用程序的安全漏洞攻击。它允许恶意用户将代码注入到网页上,其他用户在使用网页时就会收到影响,这类攻击通常包含了HTML和用户端脚本语言(JS&…

微博百度热搜收集

背景 大家都有使用微博、百度吧,而每天的热搜想必大家也用的不少。微博、百度的热搜有7、8种分类,每个单独查看比较耗费时间,效率极低,大概要花费3,4分钟左右。最近闲来无事,冒出个想法,是不是有…

官宣:2024第二十届国际铸造件展12月精彩呈现!

Shanghai International Die-casting Casting Expo 2024第二十届上海国际压铸、铸造展览会 2024第二十届上海国际压铸、铸件产品展 时间:2024年12月18-20日 地点:上海新国际博览中心(浦东区龙阳路2345号) 报名参展&#xff1…

【Git】初识 Git

文章目录 1. 提出问题2. 如何解决?版本控制器3. 注意事项 1. 提出问题 不知道你工作或学习时,有没有遇到这样的情况:我们在编写各种文档时,为了防止文档丢失、更改失误、失误后能恢复到原来的版本,不得不复制出一个副…

CC工具箱使用指南:【浙江省村规结构调整表(杨欢)】

一、简介 群友定制工具。 这个工具的功能简单易懂,就是根据输入的现状用地和规划用地图层,生成浙江村规的结构调整表。 村规的结构调整表格式,各个省份都不太一样,无法做一个通用的工具,实在很让人头痛。 看了之后表…

FactoryMethod工厂方法模式详解

目录 模式定义实现方式简单工厂工厂方法主要优点 应用场景源码中的应用 模式定义 定义一个用于创建对象的接口,让子类决定实例化哪一个类。 Factory Method 使得一个类的实例化延迟到子类。 实现方式 简单工厂 以下示例非设计模式,仅为编码的一种规…

libcurl 简单使用

LibCurl是一个开源的免费的多协议数据传输开源库,该框架具备跨平台性,开源免费,并提供了包括HTTP、FTP、SMTP、POP3等协议的功能,使用libcurl可以方便地进行网络数据传输操作,如发送HTTP请求、下载文件、发送电子邮件等…

数据结构DAY4--哈希表

哈希表 概念:相当于字典,可以根据数据的关键字来寻找相关数据的查找表。 步骤:建立->插入->遍历->查找->销毁 建立 建立数据,形式随意,但一般为结构体(储存的数据量大)&#xff…

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅳ)其他配置项

github求⭐ vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅰ)配置项文档 vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅱ)搜索…

OpenHarmony实战开发-如何实现发布图片评论功能。

介绍 本示例将通过发布图片评论场景,介绍如何使用startAbilityForResult接口拉起相机拍照,并获取相机返回的数据。 效果图预览 使用说明 通过startAbilityForResult接口拉起相机,拍照后获取图片地址。 实现思路 1.创建CommentData类&…

进程替换execl

#include<stdio.h> #include<unistd.h> // int execl(const char *path, const char *arg, ...); int main() {printf("start:\n");execl("/usr/bin/ls","ls","-a",NULL);printf("end!\n"); }如果没有exe…

JavaScript 高性能编程 —— 加载和运行

JavaScript 在浏览器中的性能,可认为是开发者所要面对的最重要的可用性问题。此问题因 JavaScript 的阻塞特征而复杂,也就是说,当 JavaScript 运行时其他的事情不能被浏览器处理。 事实上,大多数浏览 器使用单进程处理 UI 更新和 JavaScript 运行等多个任务,而同一时间只能…

华硕ROG幻16笔记本电脑模式切换管理工具完美替代华硕奥创中心管理工具

文章目录 华硕ROG幻16笔记本电脑模式切换管理工具完美替代华硕奥创中心管理工具1. 介绍2. 下载3. 静音模式、平衡模式、增强模式配置4. 配置电源方案与模式切换绑定5. 启动Ghelper控制面板6. 目前支持的设备型号 华硕ROG幻16笔记本电脑模式切换管理工具完美替代华硕奥创中心管理…

记录一下我hive连不上DataGrip的问题

用户名和密码都没问题&#xff0c;但报如下这个错误 原因&#xff1a;是因为我在linux上没启hiveserver2服务 解决&#xff1a; [atguiguhadoop102 hadoop]$ hiveserver2 which: no hbase in (/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/module/jdk1.8…