Apollo Storybook Decorator

Wrap your React Storybook stories with Apollo Client.

Supports

React (Apollo Client V2)

React (Apollo Client V1)

React Native (Apollo Client V2)

Coming Soon:

• Vue
• Angular

The Gist

• Provide GraphQL type definitions to the decorator.
• Provide a Mock object like you would with graphql-tools http://dev.apollodata.com/tools/graphql-tools/mocking.html

Take this:

To Render this:

Getting Started

For Apollo Client 2.x (React)

yarn add apollo-storybook-react -D

npm install apollo-storybook-react --save-dev

Full Example

import React from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
import { storiesOf } from '@storybook/react';
import apolloStorybookDecorator from 'apollo-storybook-react';

const typeDefs = `
  type Query {
    helloWorld: String
  }

  schema {
    query: Query
  }
`;

const mocks = {
  Query: () => {
    return {
      helloWorld: () => {
        return 'Hello from Apollo!!';
      }
    };
  },
}

function HelloWorld() {
  return (
    <Query
      query={gql`
        query hello {
          helloWorld
        }
      `}
    >
      ({ loading, data }) => {
        const hello = data && data.helloWorld;

        if (loading) {
          return <h1>Loading one second please!</h1>;
        }

        return <h1>{hello}</h1>;
      }
    </Query>
  );
}

storiesOf('Apollo Storybook Decorator', module)
  .addDecorator(
    apolloStorybookDecorator({
      typeDefs,
      mocks,
    }),
  )
  .add('Hello World Test', () => {
    return <HelloWorld />;
  );

Usage

You can add the decorator at a per story basis:

storiesOf('Apollo Client', module).addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks,
  })
);

or you can add it to all stories, head to your storybook config.js

import { configure, addDecorator } from '@storybook/react';
import apolloStorybookDecorator from 'apollo-storybook-react';
import typeDefs from '../wherever/your/typeDefs/live';
import mocks from '../wherever/your/mocks/live';

addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks,
  })
);

function loadStories() {
  // stories...
}

configure(loadStories, module);

Options

type DecoratorType = {
  //string representing your graphql schema, if you use tools like `babel-plugin-inline-import` you can import this from a  .graphql file
  typeDefs: string | Array<string>,
  // object that resolves the keys of your graphql schema
  mocks: Object,
  apolloClientOptions?: Object,
  apolloLinkOptions?: Object,
  // optional typeResolvers for complex mocking
  typeResolvers?: Object,
  // optional context
  context?: Object,
  // optional root value
  rootValue?: Object,
  // optional resolver validation options, see: https://git.io/fALf4
  resolverValidationOptions?: Object
};

resolverValidationOptions

This option gets passed directly to makeExecutableSchema of graphql-tools, as described at https://git.io/fALf4. This allows you to override requireResolversForResolveType and other validation flags:

storiesOf('Apollo Client', module).addDecorator(
  apolloStorybookDecorator({
    typeDefs,
    mocks,
    resolverValidationOptions: {
      requireResolversForResolveType: false,
    },
  })
);

Development

This repo is split up using the lerna monorepo module.

To get started, clone this repo and run the following command:

$ yarn # install node deps

$ lerna bootstrap

To run the project's examples, run:

Current storybook is enabled in apollo-storybook-react and apollo-storybook-v1

$ yarn storybookReact

or for v1

$ yarn storybookV1