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…

MySql数据库从0-1学习-第四天多表查询

多表查询,指从多张表查询数据 连接查询 内连接: 相当于查询A和B交集部分数据外连接 左外连接: 查询左表所有的数据(包括两张表交集部分的数据)有外连接: 查询右表所有的数据(包括两张表交集部分的数据) 子查询 内连接查询 隐式内连接查询 select 字段列表 from 表1,表2 whe…

聪明利用ChatGPT,让你的论文更加出色

ChatGPT无限次数:点击直达 聪明利用ChatGPT,让你的论文更加出色 引言 近年来,人工智能技术的快速发展给我们的学术研究带来了前所未有的便利。其中,自然语言处理技术中的ChatGPT模型,作为一种生成式预训练模型,为我们…

【电控笔记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,并将其初始化为&…

动态规划专练( 198.打家劫舍)

198.打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个…

设计模式学习笔记 - 设计模式与范式 -总结:1.回顾23中设计模式的原理、背后的思想、应用场景等

1.创建型设计模式 创建型设计模式包括:单例模式、工厂模式、建造者模式、原型模式。它主要解决对象的创建问题,封装复杂的创建过程,解耦对象的创建代码和使用代码。 1.单例模式 单例模式用来创建全局唯一的对象。一个类只允许创建一个对象…

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

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

微博百度热搜收集

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

Python编程:高效数据处理与自动化任务实践

一、引言 Python,作为一种解释型、交互式、面向对象的编程语言,凭借其简洁易懂的语法和强大的功能库,已经成为数据科学、机器学习、Web开发等多个领域的首选工具。本文将探讨Python在数据处理和自动化任务方面的应用,通过具体的代码案例展示Python的强大功能。 二、数据处理…

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

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

Spring ApplicationEvent 事件处理--不用引入中间件

一、背景 有一天,小王向小李请教:“我碰到了一个功能需求,用户注册完账号后,我们需要通知他们进行激活。我想实现异步处理,但不知道怎么做才更优雅。”小李听后,不假思索地说:“你可以直接开启…

【Git】初识 Git

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

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

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

多语言vue-i18n (vue2,uniapp)

安装vue-i18n npm install vue-i18n8 --save // npm install vue-i18n–save 9版本需要vue3.0 // 在vue2环境下,默认安装 npm install vue-i18n 的版本是 vue-i18n9.2.2, // 报错信息里提示这个版本要求是vue3,所以我们安装适合vue2版本的vu…

FactoryMethod工厂方法模式详解

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

linux系统简介与环境搭建

linux系统简介与环境搭建 注:该题册一旦提交不可见不可修改,甚至不知道成绩,请谨慎提交,以下答案均为个人见解,非标准答案,如有意见,请评论!!! 一、单 选 题…