如何Mock GraphQL API的部分响应？Next.js前端开发场景

针对你在Next.js前端对接未上线GraphQL字段的需求，以下是几个无需改动后端、仅在前端层面实现临时API响应修改的可行方案：

1. Apollo Client 前端本地Mock #

你提到的Apollo Mocking并非只能在后端实现，Apollo Client本身支持前端层面的请求拦截与Mock响应配置，完全不需要后端权限：

• 安装依赖（如果未安装）：

  npm install apollo-link-mock graphql-tools
  

• 在Next.js的Apollo Client配置中，添加Mock拦截逻辑，仅针对你需要测试的特定操作名返回模拟数据：

  import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
  import { MockLink } from 'apollo-link-mock';
  import { makeExecutableSchema } from '@graphql-tools/schema';
  
  // 定义包含新增字段的本地Schema（匹配你要测试的查询结构）
  const typeDefs = `
    type Product {
      id: ID!
      name: String!
      price: Float! # 新增字段
      discount: Float! # 新增字段
    }
    type Query {
      getProduct(id: ID!): Product
    }
  `;
  
  // 定义Mock resolver，针对特定操作返回模拟数据
  const mocks = {
    Query: {
      getProduct: () => ({
        id: '123',
        name: 'Test Product',
        price: 99.99,
        discount: 10.0,
      }),
    },
  };
  
  // 开发环境启用Mock，生产环境使用真实链路
  const client = process.env.NODE_ENV === 'development'
    ? new ApolloClient({
        link: new MockLink(makeExecutableSchema({ typeDefs, resolvers: mocks })),
        cache: new InMemoryCache(),
      })
    : new ApolloClient({
        uri: '真实GraphQL接口地址',
        cache: new InMemoryCache(),
      });
  
  // 在_app.tsx中使用ApolloProvider包裹应用
  export default function App({ Component, pageProps }) {
    return (
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    );
  }
  

  这种方式可以精准匹配你修改后的查询操作，返回包含Price、Discount字段的响应，同时不影响其他请求。

2. 浏览器DevTools 请求拦截 #

无需修改代码，直接通过浏览器工具拦截并修改GraphQL响应：

• Chrome Local Overrides：

  1. 打开Chrome DevTools → Sources → Overrides → 勾选"Enable local overrides"并选择本地文件夹
  2. 发起GraphQL请求，在Network面板中找到该请求，右键选择"Save for overrides"
  3. 在本地文件夹中找到保存的响应文件，修改内容添加Price、Discount字段
  4. 再次发起请求时，浏览器会自动返回你修改后的本地响应

• Mock插件（如Mockoon）：
  配置一个拦截规则，匹配GraphQL请求的URL和请求体中的操作名，返回自定义的模拟响应。这种方式更灵活，可随时调整Mock数据。

3. Next.js 本地代理路由 #

在Next.js中创建一个临时代理API路由，仅拦截你需要测试的请求：

1. 在pages/api目录下新建graphql-mock.ts：

   import type { NextApiRequest, NextApiResponse } from 'next';
   
   export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     const { operationName } = req.body;
   
     // 仅针对特定操作名返回Mock数据
     if (operationName === 'GetProductWithNewFields') {
       return res.status(200).json({
         data: {
           getProduct: {
             id: req.body.variables.id,
             name: 'Mocked Product',
             price: 199.99,
             discount: 20.0,
           },
         },
       });
     }
   
     // 其他请求转发到真实后端
     const realResponse = await fetch('真实GraphQL接口地址', {
       method: req.method,
       headers: req.headers,
       body: JSON.stringify(req.body),
     });
     const data = await realResponse.json();
     res.status(realResponse.status).json(data);
   }
   

2. 修改前端Apollo Client的uri为/api/graphql-mock（仅开发环境）：

   const client = new ApolloClient({
     uri: process.env.NODE_ENV === 'development' ? '/api/graphql-mock' : '真实GraphQL接口地址',
     cache: new InMemoryCache(),
   });
   

   这种方式可以在不改动其他请求的前提下，针对特定操作返回Mock数据，同时其他请求正常转发到后端。

内容的提问来源于stack exchange，提问作者Kevin Smith