Storybook Addon Apollo Client

在你的 Storybook 故事中使用 Apollo Client。

版本

• 如果你使用的是 Apollo Client 2.x 和 Storybook 5.x，请使用 1.x 版本
• 如果你使用的是 Apollo Client 2.x 或 3.x 以及 Storybook 6.x，请使用 4.x 版本

安装

纱线

yarn add --dev storybook-addon-apollo-client

npm

npm install -D storybook-addon-apollo-client

在 .storybook/main.js 中将附加组件添加到你的配置中

module.exports = {
  ...config,
  addons: [
    ...your addons
    "storybook-addon-apollo-client",
  ],
};

将以下内容添加到你的 .storybook/preview.js 中

import { MockedProvider } from '@apollo/client/testing'; // Use for Apollo Version 3+
// import { MockedProvider } from "@apollo/react-testing"; // Use for Apollo Version < 3

export const parameters = {
  apolloClient: {
    MockedProvider,
    // any props you want to pass to MockedProvider on every story
  },
};

从先前版本升级

在之前的版本中，我们有一个名为 withApolloClient 的装饰器，现在不再需要。如果你正在从这个 API 升级，以下是你需要做出的更改

1. 删除所有引用已弃用的 withApolloClient 装饰器的代码。
2. 按照安装说明操作

使用查询编写你的故事

import DashboardPage, { DashboardPageQuery } from '.';

export default {
  title: 'My Story',
};

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

Example.parameters = {
  apolloClient: {
    // do not put MockedProvider here, you can, but its preferred to do it in preview.js
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        result: {
          data: {
            viewer: null,
          },
        },
      },
    ],
  },
};

有关 MockedProvider 可用选项的更多信息，请参阅 https://apollo.graphql.net.cn/docs/react/development-testing/testing

用法

在 Storybook 中，点击“显示附加组件”并导航到“Apollo Client”选项卡。

示例应用程序

要查看如何使用此附加组件的实际示例，请查看示例应用程序

https://github.com/lifeiscontent/realworld

加载状态

你可以使用 delay 参数来模拟加载状态。

import DashboardPage, { DashboardPageQuery } from '.';

export default {
  title: 'My Story',
};

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

Example.parameters = {
  apolloClient: {
    mocks: [
      {
        // Use `delay` parameter to increase loading time
        delay: 1e21,
        request: {
          query: DashboardPageQuery,
        },
        result: {
          data: {},
        },
      },
    ],
  },
};

错误状态

你可以使用 error 参数来创建错误状态。

import DashboardPage, { DashboardPageQuery } from '.';

export default {
  title: 'My Story',
};

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

Example.parameters = {
  apolloClient: {
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        error: new Error('This is a mock network error'),
      },
    ],
  },
};