Storybook: [Question] Is it possible to dynamically generate stories from data fetched from DB

[aviramga]

Question

I have set of config files that define pages that are stored remotely in a db. I would like to generate a story for each config when running my tests.
Is it possible to fetch the data remotely and then run the tests according to the data fetched from the DB? The amount of stories will be dynamic according to the amount of entries stored in the DB

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react lastest

[danielduan]

You can probably include some javascript somewhere to dynamically load each one. It doesn't seem like something that's easy to do though.

[Hypnosphi]

You can try something like this:

fetchData.then(kinds => kinds.forEach(kind => {
  const stories = storiesOf(kindName, module)
  kind.stories.forEach(story => stories.add(story.name, generateStory(story.content)))
})

[aviramga]

@Hypnosphi thanks for your help!
Just tried what you've suggested and didn't see any story, here is my code
````
import React from "react";
import templates from "./index";
import { storiesOf } from "@storybook/react";

const generateStory = page => {
const TemplateComponent = templates[page.pageConfig.template];
return () => ;
};

fetch(http://remote-path-to-endpoint, {
credentials: "include",
mode: "no-cors",
headers: {
"content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
const { pages } = data;
pages.forEach(page => {
const stories = storiesOf(page.path.replace(/\//g, "_"), module);
stories.add(page.pageConfig.template, generateStory(page));
});
})
.catch(err => {
console.error("Get production pages error: ", err);
});

````

What am I doing wrong? thanks!

[Hypnosphi]

Ok, looks like stories need to be declared synchronously. So you probably need to move the async part to config.js:

import { configure } from '@storybook/react'

import {fetchData, generateStories from './dynamic-stories'

fetchData().then(data => {
  configure(() => generateStories(data), module)
})

Note that configure function is called only when data is available

[aviramga]

Thanks @Hypnosphi ! managed to get this working with start-storybook!
Is there a way to make this magic happen with build-storybook as well?

[Hypnosphi]

What's the error with it?

[igor-dv]

I can suggest an alternative way, where you pre-generate the story files before running start/build-stroybook.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!