使用Apollo-server创建mock数据

创建mock文件夹

创建mock/index.js

安装

"@apollo/server": "^4.2.2",
"@graphql-tools/mock": "^8.7.12",
"@graphql-tools/schema": "^9.0.10",

@apollo/server (^4.2.2)：

作用： @apollo/server 是 Apollo GraphQL 的服务器实现。它提供了构建和运行 GraphQL 服务所需的核心功能。可以使用它来创建和配置 GraphQL 服务器，处理 GraphQL 查询、变更和订阅，以及提供与客户端之间的通信。

@graphql-tools/mock (^8.7.12)：

作用： @graphql-tools/mock 是 graphql-tools 包中的一个模块，用于在 GraphQL 模式中添加模拟数据。它允许你在开发和测试阶段使用虚拟数据，而不必直接连接到真实的数据源。这对于前端开发和服务端开发的并行进行是很有用的。

@graphql-tools/schema (^9.0.10)：

作用： @graphql-tools/schema 是 graphql-tools 包中的一个模块，用于创建和操作可执行的 GraphQL 模式。它提供了一组工具，使得在代码中定义和组织 GraphQL 模式变得更加方便。通过使用这个模块，你可以创建可执行的 GraphQL 模式，包括类型定义、解析器和其他相关配置。

这些包通常一起使用，尤其在构建和测试 GraphQL 服务时。@apollo/server 提供了核心的 GraphQL 服务器功能，而 @graphql-tools/mock 则为开发和测试提供了添加模拟数据的能力。@graphql-tools/schema 则用于更灵活地创建和管理 GraphQL 模式。这些工具的组合使得开发者能够更方便地构建、测试和调试 GraphQL 服务。

添加mock的script

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "mock": "node ./mock/index.js",
    "preview": "vite preview",
    "test": "vitest"
  },

执行pnpm run mock，就可以进入mock调试面板

http://localhost:8888/

安装faker，用于生成随机数据

"@faker-js/faker": "^7.6.0",

@faker-js/faker 是 JavaScript 中的一个假数据生成库，用于生成各种类型的虚假数据。这种假数据对于开发和测试过程中创建模拟数据非常有用，以及在 UI 开发时展示样本数据。

假数据生成：

Faker 可以生成各种类型的假数据，如姓名、地址、电子邮件、日期等，以便模拟真实数据。

例如，faker.name.lastName() 可以生成一个随机的姓氏。

多语言支持：

Faker 支持多种语言，可以生成符合特定语言文化的假数据。

这段代码创建了一个 GraphQL 服务器，使用了模拟数据（mocks）以及一些默认值，以便在开发和测试阶段能够快速验证前端应用对 GraphQL API 的请求。

/* eslint-disable eol-last */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line import/no-extraneous-dependencies
import { ApolloServer } from '@apollo/server';
// eslint-disable-next-line import/no-extraneous-dependencies
import { startStandaloneServer } from '@apollo/server/standalone';
import { addMocksToSchema } from '@graphql-tools/mock';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { faker } from '@faker-js/faker/locale/zh_CN';

const typeDefs = `#graphql
  type UserType {
    id: String!
    name: String!
    desc: String!
    account: String!
  }

  type Query {
    """使用 ID 查询用户"""
    find(id: String!): UserType!
  }

  type Mutation {
    """新增用户"""
    create(params: UserInput!): Boolean!

    """修改用户"""
    update(id: String!, params: UserInput!): Boolean!

    """删除用户"""
    del(id: String!): Boolean!
  }

  input UserInput {
    name: String!
    desc: String!
  }
`;

const resolvers = {
  UserType: {
    name: () => faker.name.lastName() + faker.name.firstName(),
  },
};

const mocks = {
  Int: () => 6,
  Float: () => 22.1,
  String: () => 'Hello',
};

const server = new ApolloServer({
  schema: addMocksToSchema({
    schema: makeExecutableSchema({ typeDefs, resolvers }),
    mocks,
    preserveResolvers: true,
  }),
});

startStandaloneServer(server, { listen: { port: 8888 } });

Apollo Server： ApolloServer 是 Apollo 提供的用于构建 GraphQL 服务器的主要类。

startStandaloneServer： startStandaloneServer 是 Apollo 提供的用于启动独立 GraphQL 服务器的函数。

addMocksToSchema： addMocksToSchema 是 @graphql-tools/mock 包中的函数，用于在 GraphQL 模式中添加模拟数据。

makeExecutableSchema： makeExecutableSchema 是 @graphql-tools/schema 包中的函数，用于创建可执行的 GraphQL 模式。

faker： @faker-js/faker/locale/zh_CN 包提供的 faker 对象用于生成模拟数据，它使用了中文语言配置。

GraphQL 模式定义：

const typeDefs = `#graphql
  type UserType {
    id: String!
    name: String!
    desc: String!

    """账户信息"""
    account: String!
  }

  type Query {
    """使用 ID 查询用户"""
    find(id: String!): UserType!
  }

  type Mutation {
    """新增用户"""
    create(params: UserInput!): Boolean!

    """更新用户"""
    update(id: String!, params: UserInput!): Boolean!

    """删除一个用户"""
    del(id: String!): Boolean!
  }

  input UserInput {
    name: String!
    desc: String!
  }
`;

这里定义了一个包含用户类型 (UserType)、查询 (Query) 和变更 (Mutation) 的 GraphQL 模式。

模式中包含了 find、create、update 和 del 四个操作，分别用于查询、新增、更新和删除用户。

定义了 UserInput 输入类型，用于在新增和更新用户时传递用户信息。

定义了一个名为 Mutation 的 GraphQL 对象类型，表示变更操作（新增、更新、删除）。

包含了三个变更字段：create、update、del，每个字段接收特定的参数，并返回布尔类型 (Boolean) 表示操作成功与否。

create 和 update 操作接收 UserInput 类型的参数，其中 UserInput 是一个输入类型，用于传递新增和更新操作的用户信息。

定义了一个名为 UserInput 的 GraphQL 输入类型，表示用于创建和更新用户的输入。

包含了两个字段：name 和 desc，都是非空字符串类型 (String)。

通过这段代码，定义了一个包含用户类型、查询和变更操作的 GraphQL Schema。GraphQL Schema 是用于描述服务端支持的查询和变更的数据结构，客户端可以使用这个 Schema 来执行相应的 GraphQL 操作。

模拟数据生成：

const resolvers = {
  UserType: {
    name: () => faker.name.lastName() + faker.name.firstName(),
  },
};
const mocks = {
  Int: () => 6,
  Float: () => 22.1,
  String: () => 'hello',
};

resolvers 对象包含了用于解析 GraphQL 类型中字段的函数。在这里，对于 UserType 类型中的 name 字段，使用 faker 生成了一个随机的中文名字，name 字段的解析函数使用 faker 生成一个随机的中文姓和名组合。

mocks 对象定义了在模拟数据中使用的默认值。对于 Int 类型，返回整数 6；对于 Float 类型，返回浮点数 22.1；对于 String 类型，返回字符串 'Hello'。

这两个部分通常用于在开发环境中，当 GraphQL Schema 中的某个字段需要返回数据时，但实际数据还没有准备好时，通过模拟数据的方式提供一个虚拟的返回结果，以方便前端或其他部分的开发和测试。

创建 Apollo 服务器实例：

const server = new ApolloServer({
  schema: addMocksToSchema({
    schema: makeExecutableSchema({ typeDefs, resolvers }),
    mocks,
    preserveResolvers: true,
  }),
});

创建了一个 Apollo Server 实例，该实例的 GraphQL Schema 包含了之前定义的类型定义和解析器，并通过 @graphql-tools/mock 提供的 addMocksToSchema 函数添加了模拟数据

使用 makeExecutableSchema 创建了一个可执行的 GraphQL 模式，结合了定义的类型 (typeDefs) 和解析函数 (resolvers)。

typeDefs 是之前定义的 GraphQL 类型定义语言（Type Definition Language）。

resolvers 是之前定义的解析器对象。

使用 addMocksToSchema 函数，将模拟数据 mocks 添加到模式中，以便在执行查询时返回模拟的数据。preserveResolvers: true 表示保留原始的解析函数，允许在需要时使用实际的解析逻辑。

• schema 参数是通过 makeExecutableSchema 创建的可执行 Schema。
• mocks 参数是定义了模拟数据的对象，用于模拟不同类型字段的返回值。
• preserveResolvers 参数设置为 true，表示保留原始的解析器函数。

启动 GraphQL 服务器：

startStandaloneServer(server, { listen: { port: 8888 } });

使用 startStandaloneServer 函数启动了一个独立的 GraphQL 服务器，监听在端口 8888 上。

startStandaloneServer 函数是 Apollo Server 提供的一个用于启动独立（standalone） GraphQL 服务器的函数。这个函数通常用于在没有集成到现有 HTTP 服务器（例如 Express 或 Koa）的情况下，快速地启动一个独立的 GraphQL 服务。

这行代码的作用是启动一个独立的 GraphQL 服务器，其中：

server 是一个已经配置好的 Apollo Server 实例，包含了 GraphQL Schema 和其他相关配置。

{ listen: { port: 8888 } } 是一个配置对象，表示服务器监听的端口为 8888。

整体的作用是将 server 实例作为参数传递给 startStandaloneServer 函数，以配置和启动独立的 GraphQL 服务器。这个服务器会在指定的端口上监听 GraphQL 请求。