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-tools

import { mockServer } from 'graphql-tools';
import from './mySchema.graphql';
 
const myMockServer = mockServer(schema);
myMockServer.query(`{
  allUsers: {
    id
    name
  }
}`);
 
// 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) {
      id
      name
    }
  }
`
 
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

相关推荐

  1. 【Android】布局优化方案

    2024-04-21 03:30:01       36 阅读
  2. 分布式事务实现方案

    2024-04-21 03:30:01       37 阅读
  3. 机房建设设计方案

    2024-04-21 03:30:01       34 阅读
  4. springboot全面加密方案

    2024-04-21 03:30:01       31 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-21 03:30:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-21 03:30:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-21 03:30:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-21 03:30:01       20 阅读

热门阅读

  1. fabricjs控制背景图和画布图片展示

    2024-04-21 03:30:01       12 阅读
  2. 【学习心得】Pandas处理缺失值的思路

    2024-04-21 03:30:01       12 阅读
  3. 正则表达式笔记

    2024-04-21 03:30:01       11 阅读
  4. 【代码随想录刷题记录】LeetCode704二分查找

    2024-04-21 03:30:01       13 阅读
  5. 【备忘录】openssl记录

    2024-04-21 03:30:01       16 阅读
  6. openssl3.2 - exp - 用base64后的字符串作为配置项的值

    2024-04-21 03:30:01       14 阅读
  7. 记一次etcd数据恢复

    2024-04-21 03:30:01       14 阅读
  8. Linux 磁盘分区详解以及知识点分解

    2024-04-21 03:30:01       18 阅读
  9. SpringIOC容器Bean对象的实例化模拟

    2024-04-21 03:30:01       16 阅读
  10. daemonset会部署到主节点吗

    2024-04-21 03:30:01       14 阅读
  11. LeetCode 665. 非递减数列

    2024-04-21 03:30:01       15 阅读
  12. Linux线程调度

    2024-04-21 03:30:01       15 阅读