Package Exports

storybook-addon-apollo-client

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-addon-apollo-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Addon Apollo Client

Use Apollo Client in your Storybook stories.

As a decorator in a story

import { withApolloClient } from 'storybook-addon-apollo-client';
import MyComponentThatHasAQuery, {
  MyQuery,
} from '../component-that-has-a-query';
export default {
  title: 'My Story',
  decorators: [withApolloClient],
};

export const example = () => <MyComponentThatHasAQuery />;

example.story = {
  parameters: {
    apolloClient: {
      mocks: [
        { request: { query: MyQuery }, result: { data: { viewer: null } } },
      ],
    },
  },
};

Usage in `preview.js`

import { withApolloClient } from 'storybook-addon-apollo-client';
import { addDecorator } from '@storybook/react';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();

addDecorator(
  withApolloClient({
    cache,
    ...// take a look at all the options in https://www.apollographql.com/docs/react/development-testing/testing
    // everything that is used in `storybook-addon-apollo-client` is a 1 to 1 mapping of MockedProvider
  })
);

if you setup withApolloClient in preview, it will not need to be added to the decorators key in each story, consider doing this if you have a lot of stories that depend on Apollo.

Read more about the options available for MockedProvider at https://www.apollographql.com/docs/react/development-testing/testing