How add react-relay component to the storybook?

1
2

npx -p @storybook/cli sb init
npm install --save-dev @storybook/addon-links @storybook/addon-actions

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import MyRelayComponent from '../components/MyRelayComponent';

storiesOf('MyRelayComponent', module)
  .add('default', () => (
    <MyRelayComponent
      onButtonClick={action('clicked')}
      onDataLoaded={data => console.log(data)}
    />
  ));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import React from 'react';
import { addDecorator } from '@storybook/react';
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
import { RelayEnvironmentProvider } from 'react-relay';

const fetchQuery = async (operation, variables) => {
  // Implement your custom fetch function here
};

const environment = new Environment({
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
});

addDecorator(story => (
  <RelayEnvironmentProvider environment={environment}>
    {story()}
  </RelayEnvironmentProvider>
));

1

npm run storybook