Angular Typescript中用Apollo-angular模拟GraphQL请求的最简方案咨询

直接使用Apollo官方内置的MockLink实现，无需额外搭建Mock服务，所有逻辑都在前端本地完成，配置成本极低。

1. 安装依赖 #

先安装Apollo测试工具包：
npm install @apollo/client/testing --save-dev

2. 编写Mock配置 #

在项目中新建Mock配置文件，定义每个请求对应的返回数据：

// src/app/graphql/mocks.ts
import { MockedResponse } from '@apollo/client/testing';
// 导入你业务中定义的GraphQL查询/突变对象
import { GET_USER_LIST, CREATE_USER } from './queries';

export const mockResponses: MockedResponse[] = [
  // 模拟无参数查询
  {
    request: {
      query: GET_USER_LIST
    },
    result: {
      data: {
        userList: [
          { id: '1', username: '张三', dept: '技术部' },
          { id: '2', username: '李四', dept: '产品部' }
        ]
      }
    },
    // 可选配置，模拟网络延迟
    delay: 1000
  },
  // 模拟带参数的突变请求
  {
    request: {
      query: CREATE_USER,
      variables: {
        username: '王五',
        dept: '运营部'
      }
    },
    result: {
      data: {
        createUser: {
          id: '3',
          username: '王五',
          dept: '运营部'
        }
      }
    }
  },
  // 模拟报错请求示例
  // {
  //   request: { query: GET_ERROR },
  //   error: new Error('请求失败，请稍后重试')
  // }
];

3. 替换Apollo请求链路 #

找到你项目中Apollo的初始化配置文件（通常为graphql.module.ts），通过环境变量控制是否启用Mock模式：

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
import { MockLink } from '@apollo/client/testing';
import { mockResponses } from './mocks';

// 可通过环境变量灵活切换模式，后端接口可用后直接修改配置即可
const ENABLE_MOCK = true;

@NgModule({
  imports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: (httpLink: HttpLink) => {
        return {
          cache: new InMemoryCache(),
          link: ENABLE_MOCK
            ? new MockLink(mockResponses)
            : httpLink.create({ uri: '你的正式GraphQL接口地址' })
        };
      },
      deps: [HttpLink]
    }
  ]
})
export class GraphQLModule {}

4. 正常调用接口即可 #

你业务代码中调用Apollo Angular的逻辑完全不需要修改，发起请求后会自动匹配Mock配置返回对应数据。
这套方案完全不侵入业务代码，后端接口开发完成后只需要关闭Mock开关即可无缝切换到正式环境，无需调整业务逻辑

常见注意点 #

• 如果Mock返回的字段和你GraphQL查询中声明的字段不匹配，Apollo会在控制台抛出明确警告，方便快速排查格式问题
• 新增Mock请求只需要在mockResponses数组中追加对应配置即可
• Mock匹配规则会同时匹配请求的Query/Mutation结构和传入的variables参数，完全贴合真实请求场景

内容的提问来源于stack exchange，提问作者Paweł Bakuła