Как добавить компонент релейной реакции в сборник рассказов?

Question

Я пытаюсь создать сборник рассказов для моего react-realy приложение, но я не знаю, как установить макет данных для этого компонента. Для простого компонента это нормально, потому что я могу использовать фиктивный компонент пользовательского интерфейса против контейнерного подхода, но я не могу использовать это для вложенных релейных компонентов, например, есть UserList компонент, который я хочу добавить в сборник рассказов, я могу разделить часть фрагмента реле в контейнер и часть пользовательского интерфейса для компонента, но что если UserList дети тоже релейная составляющая? Я не могу разделить их, когда они являются частью состава UserList?

Есть ли какое-то решение для добавления компонентов реле в сборник рассказов?

Answer 1

Я создал пакет NPM под названием use-relay-mock-environment, который основан на который позволяет вам создавать истории из сборника рассказов из компонентов Relay.

Он позволяет вкладывать компоненты 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>
  );
};

Вы также можете добавить в качестве декоратора, но я рекомендую не делать этого, если вы хотите создать несколько историй для разных состояний / фиктивных данных. В приведенном выше примере я показываю две истории: одну и одну.

Мало того, это требует минимального кода, когда вам не нужно добавлять директиву к вашему запросу, и данные автоматически генерируются для вас с помощью имитирующиеfaker.js , что позволяет вам сосредоточиться на том, что имеет значение, а именно на создании отличного пользовательского интерфейса.

Не стесняйтесь просмотреть исходный код здесь, если вы хотите реализовать что-то подобное: https://github.com/richardguerre/use-relay-mock-environment.

Примечание: он все еще находится на начальной стадии, поэтому некоторые вещи могут измениться, но хотелось бы получить отзывы!

---

Я также создал relay-butler, который представляет собой интерфейс командной строки, который принимает фрагменты GraphQL и выводит компоненты Relay, включая автоматически сгенерированный компонент запроса, который обертывает компонент фрагмента, и истории Storybook ( и по умолчанию), которые обертывают этот компонент запроса. И буквально в течение нескольких минут я могу создавать красивые компоненты Relay, которые «задокументированы» в Storybook.

Также хотелось бы получить отзывы об этом!