Storybook add on for setting server urls

问题

We are using storybook to build ui components. Ui components are related to some data, in this case REST-Server. In actions I can add custom datas, but I would like to load data by axios. I have implemented small API-library for that.

Question: Is it possible to set global parameters for storybook from storybook UI? Like server url and auth token?

回答1:

It's now possible to use an addon: https://github.com/ArrayKnight/storybook-addon-headless

Storybook Addon Headless connects Restful and/or GraphQL APIs to your stories with custom queries. Queries can have validated variables and can be defined globally, per story file or per story.

Examples: https://storybook-addon-headless.netlify.com/?path=/story/examples

回答2:

You can use Environment Variables, or just add a global decorator at .storybook/config.js file.

Here is a practical example I used to set a GraphQL client across all stories:

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);

来源：https://stackoverflow.com/questions/58710353/storybook-add-on-for-setting-server-urls

标签

reactjs

StorYBook