参加直播会议:美国东部时间周四上午 11 点,Storybook 9 版本发布和 AMA(Ask Me Anything)

Apollo Client

在你的 Storybook story 中使用 Apollo Client。

在 Github 上查看

Storybook Apollo Client 插件

在你的 Storybook story 中使用 Apollo Client。

版本

  • 如果你正在使用 Apollo Client 2.x 和 Storybook 5.x,请使用 1.x 版本
  • 如果你正在使用 Apollo Client 2.x 或 3.x 和 Storybook 6.x,请使用 4.x 版本

安装

yarn

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. 遵循安装说明

使用查询编写你的 stories

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,
          },
        },
      },
    ],
  },
};

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

用法

在 Storybook 中,点击“显示插件”并导航到“Apollo Client”选项卡。

Addon UI Preview

示例应用

要查看此插件的实际使用示例,请查看示例应用

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'),
      },
    ],
  },
};