github.com/alexandrebodin/storybook-addon-apollo-graphql @v2.1.0

    <img width="100" src="https://github.com/alexandrebodin/storybook-addon-apollo-graphql/raw/v2.1.0/storybook-apollo.png" alt="logo">



<h3 align="center">Storybook Apollo Graphql addon</h3>

Test your Apollo graphql components with an offline graphql server

    <a href="https://www.npmjs.com/package/storybook-addon-apollo-graphql"><img src="https://img.shields.io/npm/dt/storybook-addon-apollo-graphql.svg" alt="Npm download"></a>
    <a href="https://www.npmjs.com/package/storybook-addon-apollo-graphql"><img src="https://img.shields.io/npm/v/storybook-addon-apollo-graphql.svg" alt="Npm version"></a>
    <a href="https://www.npmjs.com/package/storybook-addon-apollo-graphql"><img src="https://img.shields.io/circleci/project/github/alexandrebodin/storybook-addon-apollo-graphql.svg" alt="Circle CI status"></a>

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 } }) => 

{random}

;
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