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://www.apollographql.com/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"),
      },
    ],
  },
};