如何将 react-relay 组件添加到故事书中？

Posted 2023-03-08

【中文标题】如何将 react-relay 组件添加到故事书中？

【英文标题】：How add react-relay component to the storybook?

【发布时间】：2018-01-10 02:09:27

【问题描述】：

我正在尝试为我的react-realy 应用程序创建一个故事书，但我不知道如何为该组件设置模型数据。对于简单的组件是可以的，因为我可以使用 dummy UI component vs Container 方法，但我不能将它用于嵌套的中继组件，例如有一个 UserList 组件，我想要添加到 storybook，我可以将中继片段部分拆分为容器，将 UI 部分拆分为组件，但如果 UserList 子级太中继组件怎么办？当它们是UserList 的组成部分时，我不能拆分它们？

是否有一些解决方案可以将中继组件添加到故事书中？

【问题讨论】：

我所做的是为中继容器和我的组件创建一个单独的文件，即使它是否是子组件。我对所有组件都这样做了。这样，您就不用担心它是否是乐曲的一部分

嘿@Grund，你找到解决问题的方法了吗？

我得到了同样的解决方案。

我明白了。感谢您的回复！ ;)

graphql.org/blog/mocking-with-graphql

【参考方案1】：

我创建了一个名为 use-relay-mock-environment 的 NPM 包，它基于 relay-test-utils，它允许您使用 Relay 组件制作 Storybook 故事。

它允许嵌套 Relay 组件，因此您实际上可以为由 Relay 组件组成的整个页面制作故事。这是一个例子：

// MyComponent.stories.(js | jsx | ts | tsx)
import React from 'react';
import  RelayEnvironmentProvider  from 'react-relay';
import createRelayMockEnvironmentHook from 'use-relay-mock-environment';
import MyComponent from './MyComponentQuery';

const useRelayMockEnvironment = createRelayMockEnvironmentHook(
  // ...Add global options here (optional)
);

export default 
  title: 'MyComponent',
  component: MyComponent,
;

export const Default = () => 
  const environment = useRelayMockEnvironment(
    // ...Add story specific options here (optional)
  );

  return (
    <RelayEnvironmentProvider environment=environment>
      <MyComponent />
    </RelayEnvironmentProvider>
  );
;

export const Loading = () => 
  const environment = useRelayMockEnvironment(
    forceLoading: true
  );

  return (
    <RelayEnvironmentProvider environment=environment>
      <MyComponent />
    </RelayEnvironmentProvider>
  );
;

您也可以添加<RelayEnvironmentProvider /> 作为装饰器，但如果您想为不同的状态/模拟数据创建多个故事，我建议不要这样做。在上面的示例中，我展示了 2 个故事，Default 一个，Loading 一个。

不仅如此，它还需要最少的编码，您无需在查询中添加@relay-test-operation 指令，并且使用faker.js 为您自动生成模拟数据，让您专注于重要的事情，这正在构建出色的 UI。

如果您想实现类似的东西，请随时在此处查看源代码：https://github.com/richardguerre/use-relay-mock-environment。

注意：它仍处于早期阶段，所以有些事情可能会改变，但希望得到一些反馈！

---

我还创建了relay-butler，这是一个 CLI，它接收 GraphQL 片段并输出 Relay 组件，包括包装片段组件的自动生成的查询组件，以及 Storybook 故事（Default 和 Loading 的故事）默认情况下）包装该查询组件。从字面上看，我可以在几分钟内创建漂亮的 Relay 组件，并在 Storybook 中“记录”。

也希望得到一些反馈！