用于设置服务器 url 的 Storybook 插件

Posted 2023-02-19

【中文标题】用于设置服务器 url 的 Storybook 插件

【英文标题】：Storybook add on for setting server urls

【发布时间】：2020-03-01 18:26:48

【问题描述】：

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

问题：是否可以从 Storybook UI 为 Storybook 设置全局参数？喜欢服务器 url 和身份验证令牌？

【参考方案1】：

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

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

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

【参考方案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);