How to Write Full Page Stories with Apollo Client
One of my duties as a developer is to maintain my company’s frontend codebase. A while ago, I noticed that every time I upgraded our UI package, visual bugs appeared on the pages that use those components.
We couldn’t confidently upgrade the UI package without introducing bugs. We already were using Storybook to test components for visual regressions using Chromatic. But I hadn’t added the pages to Storybook because they require Apollo Client to provide data.
I decided to build the Apollo Client addon to help us mock pages in Storybook alongside our components. That way, we can see how feature changes impact pages and automate visual testing.
Why mock Apollo Client in Storybook?
Before we start, let’s go over how we use Apollo Client. Apollo Client fetches data at the page-level from a GraphQL backend. Apollo Client recommends using a MockedProvider component to mock API responses in a test. The MockedProvider is useful for testing pages that make network requests.
I wanted to put entire pages into Storybook, so I could take snapshots of each page and use machines to show me the differences visually. But to do that, I needed to stub out the requests Apollo was making in the Page Components.
The Apollo Client addon integrates the MockedProvider pattern in Storybook. That makes it easy to view and test pages.
Viewing full pages in Storybook
Without the Apollo Client Storybook Addon, I would have to manually test 20+ pages heavily dependent on a user being in a specific state to show other parts of the page.
The addon allows me to:
- Add stories with different mocked data to show all the various complex states of my app.
- Add mutations to test specific actions in the UI.
- Add errors to show how the app will respond when something doesn’t work as expected.
Self-documenting API Requests
In the addon panel, view the Request, Variables, Context, Results, and Errors in different tabs. The Panel is a handy way of seeing all the relevant data your page or component needs. It also serves as API documentation.
How to get started
yarn add --dev storybook-addon-apollo-clientAdd storybook-addon-apollo-client to your .storybook/main.js file.
// .storybook/main.jsmodule.exports = {
addons: [
"storybook-addon-apollo-client",
],
};
Pass MockedProvider to the addon in .storybook/preview.js.
// .storybook/preview.js// Use for Apollo Version 3+
import { MockedProvider } from '@apollo/client/testing';// Use for Apollo Version < 3
// import { MockedProvider } from "@apollo/react-testing";export const parameters = {
apolloClient: {
MockedProvider,
// any props you want to pass to MockedProvider on every story
},
};
Write your first story with the Apollo Client Storybook Addon.
import DashboardPage, {
DashboardPageQuery
} from '../components/DashboardPage';export default {
title: 'Pages/Dashboard',
component: DashboardPage,
};export const Main = () => <DashboardPage />;Main.parameters = {
apolloClient: {
// do not put MockedProvider here.
// You can, but its preferred to do it in preview.js
mocks: [
{
request: {
query: DashboardPageQuery,
},
result: {
data: {
viewer: null,
},
},
},
],
},
};
Contact me
I hope you enjoyed learning about the Apollo Client Storybook addon. Feel free to contact me via the GitHub page if you have any questions.
- 🌟 Star the addon on GitHub
- 🐤 Follow me on Twitter.
If you like this addon, check out the Storybook powered UI kit I’m building here.
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.
