Storybook 插件 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 版本
• 如果您使用的是 Apollo Client 2.x 或 3.x 和 Storybook 7.x，请使用 5.x 版本
• 如果您使用的是 Apollo Client 2.x 或 3.x 和 Storybook 8.x，请使用 7.x 版本

已知问题

由于 Apollo 中 MockedProvider 的工作方式，您在访问子故事（访问同一文件中存在的多个故事）时需要进行硬刷新才能获得预期结果，请在此处为我的评论点赞，看看我们能否解决此问题：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. 按照安装说明操作

使用查询编写您的故事

import DashboardPage, { DashboardPageQuery } from ".";

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

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

Example.parameters = {
  apolloClient: {
    mocks: [
      {
        request: {
          query: DashboardPageQuery,
        },
        result: {
          data: {
            viewer: null,
          },
        },
      },
    ],
  },
};

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

用法

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