Storybook: Carregando dados externos antes de adicionar história

Criado em 16 fev. 2017  ·  3Comentários  ·  Fonte: storybookjs/storybook

É possível fazer algum trabalho assíncrono, como buscar dados por meio de API externa antes de renderizar / adicionar uma história?

Mais ou menos assim por dentro:

// inside src/stories/index.js

axios.get('http://api.someURLtogetdata.com')
  .then(({ data }) => {
    storiesOf('Data Viewer', module)
      .add('Test', () => {
        return <TestStory data={data} />;
      })
});

Isso não funciona. Eu também tentei fazer algo assim:

const stories = storiesOf('Data Viewer', module)

axios.get('http://api.someURLtogetdata.com')
  .then(({ data }) => {
      stories.add('Test', () => {
        return <TestStory data={data} />;
      })
});

Alguma dica sobre como conseguir algo assim com o livro de histórias?

picture dnlsandiego
👍6

Comentários muito úteis

Poderia sugerir algo como

class LoadData = extends React.Component {
  state = {
    data: null
  }

  componentDidMount() {
    axios.get(this.props.url).then(data => this.setState({ data }))
  }

  render() {
    return this.props.children(this.state.data)
  }
}

storiesOf('DataViewer')
  .add('test', () => (
    <LoadData url="http://api.someURLtogetdata.com">
      {data => 
        <TestStory data={data} />
      }
    </LoadData>
  ))
picture einarlove em 16 fev. 2017
👍18 👎4

Todos 3 comentários

Poderia sugerir algo como

class LoadData = extends React.Component {
  state = {
    data: null
  }

  componentDidMount() {
    axios.get(this.props.url).then(data => this.setState({ data }))
  }

  render() {
    return this.props.children(this.state.data)
  }
}

storiesOf('DataViewer')
  .add('test', () => (
    <LoadData url="http://api.someURLtogetdata.com">
      {data => 
        <TestStory data={data} />
      }
    </LoadData>
  ))
einarlove picture einarlove em 16 fev. 2017
👍18 👎4

Obrigado pela dica @einarlove!

Este problema aponta para o mesmo problema e tem uma solução possível: https://github.com/storybooks/react-storybook/issues/713

O que você acha disso?

Eu imagino que a API ficaria assim (isso não está implementado):

storiesOf('DataViewer')
  .add('test', () => axios
    .get('http://api.someURLtogetdata.com')
    .then(({ data }) => <TestStory data={data} />)
  )
ndelangen picture ndelangen em 29 mar. 2017

Eu gostaria de ouvir seu feedback! Se você acha que a solução que acabei de postar seria adequada para o seu caso de uso, vamos falar sobre isso nesta edição: # 713.

Se você discordar e quiser outra API, fique à vontade para reabrir este problema!

ndelangen picture ndelangen em 29 mar. 2017
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

ZigGreen picture ZigGreen  ·  3Comentários
oriSomething picture oriSomething  ·  3Comentários
alexanbj picture alexanbj  ·  3Comentários
xogeny picture xogeny  ·  3Comentários
Jonovono picture Jonovono  ·  3Comentários