问题
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