React Apollo 2.1模拟Schema报错：无更多查询模拟响应

这个错误本质是你的MockedProvider没有为组件发起的**特定查询（包含完全匹配的字段和变量）**提供足够的模拟响应，或者配置的mock和实际请求不匹配。下面是几个我亲测有效的解决步骤：

1. 确保MockedProvider的mocks配置完全匹配请求 #

首先，你需要确认mock的request部分和组件实际发起的查询100%一致，包括查询结构、所有字段，以及变量。

比如，针对你报错的查询，正确的mock配置应该是这样的：

import { gql, MockedProvider } from 'react-apollo';

// 这里的query要和组件里发起的完全一致，最好直接引用组件中定义的query常量
const ME_QUERY = gql`
  query MeQuery {
    me {
      id
      email
      username
      first_name
      last_name
      bio
      website
    }
  }
`;

const mocks = [
  {
    request: {
      query: ME_QUERY,
      variables: {} // 必须和实际请求的变量完全匹配，这里是空对象
    },
    result: {
      data: {
        me: {
          id: '123',
          email: 'test@example.com',
          username: 'test_user',
          first_name: 'John',
          last_name: 'Doe',
          bio: 'Hello from mock',
          website: 'https://example.com'
        }
      }
    }
  }
];

// 在测试中包裹组件
render(
  <MockedProvider mocks={mocks} addTypename={false}>
    <YourTargetComponent />
  </MockedProvider>
);

注意：如果你的组件查询中没有自动添加__typename字段，一定要设置addTypename={false}，否则MockedProvider会自动为query添加该字段，导致请求和mock不匹配。

2. 直接引用组件中定义的Query常量 #

很多时候错误是因为手动复制query时拼写错误或者遗漏了字段，最稳妥的方式是直接导入组件里已经定义好的查询常量，比如：

import { ME_QUERY } from './YourComponent'; // 导入组件中的查询

const mocks = [
  {
    request: {
      query: ME_QUERY,
      variables: {}
    },
    result: { /* 模拟数据 */ }
  }
];

这样能完全避免query结构不匹配的问题。

3. 处理多次发起的查询请求 #

如果你的组件在挂载后多次发起同一个查询（比如在useEffect里重复调用、或者嵌套组件也发起了相同查询），那么单个mock是不够的，你需要提供足够数量的mock，或者配置允许重复响应：

• 方法一：创建多个相同的mock

// 如果组件发起2次请求，就提供2个相同的mock
const mocks = Array(2).fill({
  request: { query: ME_QUERY, variables: {} },
  result: { /* 模拟数据 */ }
});

• 方法二：使用MockLink实现重复响应

import { MockLink } from '@apollo/client/testing';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const mockLink = new MockLink([
  {
    request: { query: ME_QUERY, variables: {} },
    result: { /* 模拟数据 */ }
  }
], { repeat: true }); // 开启重复响应

const client = new ApolloClient({
  link: mockLink,
  cache: new InMemoryCache()
});

render(
  <ApolloProvider client={client}>
    <YourTargetComponent />
  </ApolloProvider>
);

4. 确认变量完全匹配 #

虽然错误提示变量是空对象，但还是要检查组件发起请求时是否真的没有传递任何变量。有时候组件可能会默认传递变量，或者在逻辑中动态添加了变量，导致mock的variables和实际请求不匹配。你可以在组件中打印查询的变量，或者用Apollo DevTools查看实际请求的详情。

内容的提问来源于stack exchange，提问作者Atsuhiro Teshima