Storybook: Charger des données externes avant d'ajouter une histoire

Créé le 16 févr. 2017 · 3Commentaires · Source: storybookjs/storybook

Est-il possible d'effectuer un travail asynchrone comme la récupération de données via une API externe avant de rendre/ajouter une histoire ?

Un peu comme ça à l'intérieur :

// inside src/stories/index.js

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

Cela ne fonctionne pas. J'ai aussi essayé de faire quelque chose comme ça :

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

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

Des conseils sur la façon de réaliser quelque chose comme ça avec storybook?

Source

dnlsandiego

👍6

Commentaire le plus utile

Pourrait suggérer quelque chose comme

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 le 16 févr. 2017

👍18 👎4

Tous les 3 commentaires

Pourrait suggérer quelque chose comme

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 le 16 févr. 2017

👍18 👎4

Merci pour le conseil @einarlove !

Ce problème fait allusion au même problème et a une solution possible : https://github.com/storybooks/react-storybook/issues/713

Qu'en pensez-vous ?

J'imagine que l'API ressemblerait à ceci (ce n'est pas implémenté):

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

ndelangen le 29 mars 2017

J'aimerais entendre vos commentaires! Si vous pensez que la solution que je viens de publier conviendrait à votre cas d'utilisation, parlons-en dans ce numéro : #713.

Si vous n'êtes pas d'accord et souhaitez une autre API, n'hésitez pas à rouvrir ce problème !

ndelangen le 29 mars 2017

Cette page vous a été utile?

0 / 5 - 0 notes