Как добавить компонент релейной реакции в сборник рассказов?
Я пытаюсь создать сборник рассказов для моего react-realy
приложение, но я не знаю, как установить макет данных для этого компонента. Для простого компонента это нормально, потому что я могу использовать фиктивный компонент пользовательского интерфейса против контейнерного подхода, но я не могу использовать это для вложенных релейных компонентов, например, есть UserList
компонент, который я хочу добавить в сборник рассказов, я могу разделить часть фрагмента реле в контейнер и часть пользовательского интерфейса для компонента, но что если UserList
дети тоже релейная составляющая? Я не могу разделить их, когда они являются частью состава UserList
?
Есть ли какое-то решение для добавления компонентов реле в сборник рассказов?
1 ответ
Я создал пакет NPM под названием use-relay-mock-environment, который основан на
Он позволяет вкладывать компоненты 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>
);
};
Вы также можете добавить
Мало того, это требует минимального кода, когда вам не нужно добавлять
Не стесняйтесь просмотреть исходный код здесь, если вы хотите реализовать что-то подобное: https://github.com/richardguerre/use-relay-mock-environment.
Примечание: он все еще находится на начальной стадии, поэтому некоторые вещи могут измениться, но хотелось бы получить отзывы!
Я также создал relay-butler, который представляет собой интерфейс командной строки, который принимает фрагменты GraphQL и выводит компоненты Relay, включая автоматически сгенерированный компонент запроса, который обертывает компонент фрагмента, и истории Storybook (
Также хотелось бы получить отзывы об этом!