Question

我们正在使用故事书来构建ui组件。 Ui组件与某些数据有关，在本例中为REST-Server。在操作中，我可以添加自定义数据，但是我想通过axios加载数据。我已经为此实现了小型API库。

问题：是否可以从故事书UI设置故事书的全局参数？像服务器网址和身份验证令牌一样？

Answer 1

现在可以使用附加组件：https://github.com/ArrayKnight/storybook-addon-headless

Storybook Addon Headless通过自定义查询将Restful和/或GraphQL API连接到您的故事。查询可以具有经过验证的变量，并且可以针对每个故事文件或每个故事进行全局定义。

示例：https://storybook-addon-headless.netlify.com/?path=/story/examples

Answer 2

您可以使用Environment Variables，或仅在.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);

添加故事书以设置服务器网址

2 个答案: