Сборник рассказов для настройки URL сервера

Question

Мы используем сборник рассказов для создания компонентов пользовательского интерфейса. Компоненты пользовательского интерфейса связаны с некоторыми данными, в данном случае REST-сервером. В действиях я могу добавить пользовательские данные, но я хотел бы загрузить данные по аксиосам. Для этого я реализовал небольшую API-библиотеку.

Вопрос: Можно ли установить глобальные параметры для сборника рассказов из пользовательского интерфейса сборника рассказов? Как URL сервера и токен аутентификации?

Answer 1

Вы можете использовать Переменные среды или просто добавить глобальный декоратор в файл .storybook/config.js.

Вот практический пример, который я использовал для установки клиента GraphQL для всех историй:

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';
import GlobalStyle from '../src/styles/GlobalStyle.styles';

const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_URI || 'https://core.gissy.now.sh/graphql',
});

addDecorator(S => (
  <ApolloProvider client={client}>
    <GlobalStyle />
    <S />
  </ApolloProvider>
));

// automatically import all files ending in *.stories.jsx
configure(require.context('../src', true, /\.stories\.jsx$/), module);