Storybook - Using loaders

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Loading data for a story

Let's say we have a specific item that needs rendering instead of mocking the hard-coded data. We can opt to load it from a remote API.

This could be a mock API, as you'll see in the example, or your actual API if it's public data.

Let's take the example of a story that renders a blog item card.

import React from 'react'; import fetch from 'node-fetch'; import { BlogItem } from './BlogItem'; export default { title: 'BlogItem' component: BlogItem, }; export const Primary = (args, { loaded: { blogItem } }) => <BlogItem {...args} {...blogItem} />; Primary.loaders = [ async () => ({ blogItem: await (await fetch('https://jsonplaceholder.typicode.com/posts/1')).json(), }), ];

Now our item will load whatever the API returns. This could be useful to try against a vast majority of randomized test items.

Loading global data

In some cases, you might want to prepare a global loader, for instance, a logged-in user attribute.

We can add these loaders into our .storybook/preview.js file like this.

import fetch from 'node-fetch'; export const loaders = [ async () => ({ currentUser: await ( await fetch('https://jsonplaceholder.typicode.com/users/1') ).json(), }), ];

Now in every story, you can use the loader.currentUser value like this.

export const Primary = (args, { loaded: { currentUser } }) => ( <BlogItem {...args} {...currentUser} /> );

Loaders can be a super reliable way to set up reusable data that flows down to the excellent story without you having to do it repeatedly.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Storybook - Using loaders

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Loading data for a story

Loading global data

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Loading data for a story

Loading global data

Thank you for reading, and let's connect!