Addon-docs: Inline rendering support for loaders

[shilman]

#12699 adds async loaders to CSF, but the loaded data is not yet compatible with Storybook Docs inline rendering. Until this is added, the loaded data is undefined.

[giorgiabosello]

You could add inlineStories: false to the docs parameters of your story to bypass this error, and then declare a new source code template to render the code correctly in storybook.
Ex.

const MyStory = {
	title: '',
	component: MyComponent,
	parameters: {
		docs: {
			inlineStories: false,
		}
	}
	loaders: [
		async () => ({
			configs: (await getConfigs()).data,
		}),
	],
}

export default MyStory

export const Default = (args, { loaded: { configs } }) => (
	<MyComponent {...args} {...configs} />
)

// this is what you will see on the Docs page.
const MyStoryCodeTemplate = (MyComponent) => `
<${MyComponent} {...props} />
`

Default.parameters = {
	docs: {
		source: {
			code: MyStoryCodeTemplate('MyComponent'),
		},
	},
}

[MichaelAllenWarner]

Looks like #14911 (which mentions this issue) was merged, but that it did not actually resolve this issue.

[shilman]

@MichaelAllenWarner no it was closed, not merged

[MichaelAllenWarner]

Oops—I blame my head cold.

[esharmony]

Is it still the case that I cannot use loaders in the docs, I am getting undefined as mentioned in this issue, but the issue is quite old.

[itsalb3rt]

You could add inlineStories: false to the docs parameters of your story to bypass this error, and then declare a new source code template to render the code correctly in storybook. Ex.

const MyStory = {
	title: '',
	component: MyComponent,
	parameters: {
		docs: {
			inlineStories: false,
		}
	}
	loaders: [
		async () => ({
			configs: (await getConfigs()).data,
		}),
	],
}

export default MyStory

export const Default = (args, { loaded: { configs } }) => (
	<MyComponent {...args} {...configs} />
)

// this is what you will see on the Docs page.
const MyStoryCodeTemplate = (MyComponent) => `
<${MyComponent} {...props} />
`

Default.parameters = {
	docs: {
		source: {
			code: MyStoryCodeTemplate('MyComponent'),
		},
	},
}

Thanks! This working for me in version 6.4.22