Storybook: Cargando datos externos antes de agregar una historia

Creado en 16 feb. 2017 · 3Comentarios · Fuente: storybookjs/storybook

¿Es posible realizar un trabajo asincrónico como la obtención de datos a través de una API externa antes de renderizar / agregar una historia?

Un poco así 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} />;
      })
});

Esto no funciona. También intenté hacer algo como esto:

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

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

¿Algún consejo sobre cómo lograr algo como esto con el libro de cuentos?

Fuente

dnlsandiego

👍6

Comentario más útil

Podría 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 en 16 feb. 2017

👍18 👎4

Todos 3 comentarios

Podría 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 en 16 feb. 2017

👍18 👎4

¡Gracias por el consejo @einarlove!

Este problema sugiere el mismo problema y tiene una posible solución: https://github.com/storybooks/react-storybook/issues/713

¿Qué sientes al respecto?

Me imagino que la API se vería así (esto no está implementado):

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

ndelangen en 29 mar. 2017

¡Me gustaría escuchar tus comentarios! Si cree que la solución que acabo de publicar estaría bien para su caso de uso, hablemos de ella en este número: # 713.

Si no está de acuerdo y desea otra API, puede volver a abrir este problema.

ndelangen en 29 mar. 2017

¿Fue útil esta página

0 / 5 - 0 calificaciones