storybook-addon-apollo-graphql

Storybook Apollo Graphql addon

Test your Apollo graphql components with an offline graphql server

Usage

This library uses graph-tools to build a schema and mock it. For mocking reference read here

Create your stories with the withApolloProvider API.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withApolloProvider } from '../../src';
import { gql, graphql } from 'react-apollo';
 
const Component = ({ data: { random } }) => <div>{random}</div>;
const ComponentWithGraphql = graphql(
  gql`
    {
      random
    }
  `
)(Component);
 
const typeDefs = `
    type Query {
        random: Int!
    }
`;
 
const mocks = {
  Query: () => ({
    random: () => Math.floor(Math.random() * 10),
  }),
};
 
export default () => {
  storiesOf('Random Number', module)
    .addDecorator(withApolloProvider({ typeDefs, mocks }))
    .add('A random number query', () => <ComponentWithGraphql />);
};

Examples

See Examples here

Testing

You can clone and run the demo

$ git clone https://github.com/alexandrebodin/storybook-addon-apollo-graphql storybook-addon-apollo-graphql
$ cd storybook-addon-apollo-graphql
$ yarn install
$ yarn storybook
$ open http://localhost:9009