Graphql mock 方案

本文主要是介绍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)
• 安全验证 - 知乎

这篇关于Graphql mock 方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---