如何在Storybook中结合Apollo分别模拟networkError与graphQLErrors？

可以分别模拟这两种错误类型，具体实现方式如下：

1. 模拟networkError #

这就是你当前使用的方式，直接在mock中使用error属性并传入Error实例，Apollo Client会将其识别为网络层面的错误：

import DashboardPage, { DashboardPageQuery } from '.';

export default {
  title: 'Dashboard/Network Error',
};

export const NetworkErrorCase = () => <DashboardPage />;

NetworkErrorCase.parameters = {
  apolloClient: {
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        error: new Error('请求超时，请检查网络连接'),
      },
    ],
  },
};

2. 模拟graphQLErrors #

要模拟GraphQL服务返回的业务错误，需要在mock的result属性中包含errors数组，而非使用error字段。这些错误会被Apollo Client解析为graphQLErrors：

import DashboardPage, { DashboardPageQuery } from '.';

export default {
  title: 'Dashboard/GraphQL Errors',
};

export const GraphQLErrorCase = () => <DashboardPage />;

GraphQLErrorCase.parameters = {
  apolloClient: {
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        result: {
          // 可选：如果接口本应返回数据，可在这里填充部分或空数据
          data: { dashboardData: null },
          // 模拟GraphQL服务返回的错误数组，每个错误需符合GraphQL Error结构
          errors: [
            {
              message: '权限不足，无法访问仪表盘',
              extensions: {
                code: 'UNAUTHORIZED',
              },
            },
            {
              message: '仪表盘数据不存在',
              extensions: {
                code: 'NOT_FOUND',
              },
            },
          ],
        },
      },
    ],
  },
};

关键区别说明 #

• networkError：通过error属性传递Error实例，模拟网络连接失败、请求超时等底层错误。
• graphQLErrors：通过result.errors数组传递符合GraphQL规范的错误对象，模拟服务端返回的业务逻辑错误，此时请求本身是成功到达服务端的。

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