Storybook 插件 Apollo Client

在 Storybook stories 中使用 Apollo Client。

版本

• 如果你使用 Apollo Client 2.x 和 Storybook 5.x，请使用版本 1.x
• 如果你使用 Apollo Client 2.x 或 3.x 和 Storybook 6.x，请使用版本 4.x
• 如果你使用 Apollo Client 2.x 或 3.x 和 Storybook 7.x，请使用版本 5.x
• 如果你使用 Apollo Client 2.x 或 3.x 和 Storybook 8.x，请使用版本 7.x
• 如果你使用 Apollo Client 3.x 和 Storybook 8.3+，请使用版本 8.x

已知问题

由于 MockedProvider 在 Apollo 中的工作方式，当你访问子故事（同一文件中的故事）时，需要硬刷新才能获得预期结果。请在此处为我的评论点赞，看看我们是否能解决此问题：https://github.com/apollographql/apollo-client/issues/9738#issuecomment-1606316338

安装

pnpm

pnpm add -D storybook-addon-apollo-client

yarn

yarn add -D storybook-addon-apollo-client

npm

npm install -D storybook-addon-apollo-client

将插件添加到你的配置中，位于 .storybook/main.ts 文件内。

export default {
  ...config,
  addons: [
    ...yourAddons
    "storybook-addon-apollo-client",
  ],
};

7.0 特性

• 移除了 globalMocks 键以支持组合方式

从 5.x+ 迁移到 7.x

小于 7.x 的示例

preview.ts

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

export const preview = {
  parameters: {
    apolloClient: {
      MockedProvider,
      globalMocks: [
        // whatever mocks you want here
      ],
    },
  },
};

7.x 的示例

preview.ts

// Whatever you want here, but not Apollo Client related

component.stories.ts

import type { Meta } from "@storybook/react";
import { globalMocks } from "./globalMocks";
import { otherMocks } from "./otherMocks";
import { YourComponent, YOUR_QUERY } from "./component";

export const meta: Meta<typeof DisplayLocation> = {
  component: YourComponent,
  parameters: {
    apolloClient: {
      mocks: [
        ...globalMocks,
        ...otherMocks,
        {
          request: {
            query: YOUR_QUERY,
          },
          result: {
            data: {
              // your data here
            },
          },
        },
      ],
    },
  },
};

从低于 6.x 的版本升级

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

1. 移除所有引用已弃用的 withApolloClient 装饰器的代码。
2. 遵循安装说明

使用查询编写你的 stories

import DashboardPage, { DashboardPageQuery } from ".";

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

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

Example.parameters = {
  apolloClient: {
    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: 1000,
        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 ApolloError("This is a mock network error"),
      },
    ],
  },
};