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

Question

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

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

Answer 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 ，这是一个接受 GraphQL 片段并输出 Relay 组件的 CLI，包括包装片段组件的自动生成的查询组件，以及包装该查询组件的 Storybook 故事(默认情况下为 Default 和 Loading)。实际上，在几分钟内，我就可以创建漂亮的 Relay 组件，这些组件在 Storybook 中“记录”了。

也希望得到一些反馈!