Storybook add on for setting server urls

▼魔方 西西 提交于 2020-08-11 03:58:39

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!