Introducing the Storybook Axios addon
🔮 Why I created storybook-axios addon
Storybook is a fantastic tool to share the current state of your UI with your team. It helps with CDD (Component Driven Development) and allows you to develop reusable components in isolation.
When it comes to network requests things get a little tricky. React’s Higher Order Components (and similar techniques) help you move network requests out of your components into their own layer. But, you still have to mock API requests by mocking the API endpoint.
With API mocks, it is hard to see what data is exchanged between your component and the mocked API. Those requests aren’t visible in the network panel of the devtools. And since you don’t want to place console.logs everywhere, you’ll need a way to make those requests visible.
I built the Storybook Axios addon to help you see what data is sent to the backend and returned; either from the API or the mock. That way you can debug your connected components as you build in Storybook.
🔬 Why Axios and Storybook?
Axios is a well known HTTP library for communicating asynchronously with a backend. Our components use it to talk to an app API. With Storybook, we build in components in isolation from the app so we need a way to mock the API.
To make development easier, I thought it would be convenient to have axios calls visible in a Storybook addon panel. The first idea was to integrate with the existing actions addon. Inside my components I emit events with the data sending and coming from the backend. And in the story, I listen for those events and print out the result. But with HTTP communication happening in a state management library like vuex this option would not work very well.
I decided to create a Storybook addon because it already has the concept of decorators that fits with Axios’ ability to intercept requests and responses.
🛠 How it works
Let’s get a bit more technical about how this all works. I get the Axios instance of a story via parameter and supply it to my decorator. The decorator adds two interceptors, one for requests and one for responses; then it stores those objects in a list. That list is what is rendered inside the addon panel.
Storybook isolates your components by rendering them in a preview iframe that is separate from the Storybook app (a.k.a., the Manager).
The axios decorator for each story is rendered inside theiframe, but the intercepted requests should be rendered in the addon panel which is inside the manager app. Luckily there is a communication channel which is a simple event emitter.
In the addon panel (not the decorator), the addons.getChannel() API is used to get events from the decorator. The decorator will use the useChannel hook to emit events. In our case, those events will be triggered.
Now that the data is sent to the channel, the addon panel needs to listen for those events. Thanks to React, which Storybook uses to create addons, the useState hook keeps all requests persistent across rerenders. Everytime there’s an event from the channel, we update the state by adding the request or response data into a list.
Check out the source on the repo
Install
The installation of the addon is easy! First run:
npm install storybook-axios -DThen register the addon in the .storybook/main.js
// .storybook/main.jsaddons: [
…
'storybook-axios'
],
Configure
Now that we have the addon visible in the UI we need to wrap our stories with a decorator in order to capture the network communication via interceptors and show them in the panel.
// .storybook/preview.jsimport withAxiosDecorator from ‘storybook-axios’;export const decorators = [withAxiosDecorator(getAxios())];
Note: I use a function called getAxios() to provide the same Axios instance wherever I call it. This ensures that error handling and config is present when I do networking stuff. It also helps in our case because the Axios instance used in the components must be passed into the decorator in order for the interceptors to be added.
And you are done! 🚀
Get involved
Check out the Addon Catalog for more addons or learn how to create an addon. To get the latest addons and Storybook news sign up to the Storybook mailing list. Check out Storybook on GitHub and join the Discord chat.
