Skip to content

Storybook decorator to add offline ApolloProvider to use into your stories

Notifications You must be signed in to change notification settings

alexandrebodin/storybook-addon-apollo-graphql

Repository files navigation

logo

Storybook Apollo Graphql addon

Test your Apollo graphql components with an offline graphql server

Npm download Npm version Circle CI status

Addon example

Usage

This library uses graphql-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, schemaOptions: {}, mockOptions: {} }))
    .add('A random number query', () => <ComponentWithGraphql />);
};

You can optionnaly pass extra options:

  • schemaOptions (passes options to makeExecutableSchema) link
  • mockOptions (passes options to addMockFunctionsToSchema) link

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

About

Storybook decorator to add offline ApolloProvider to use into your stories

Resources

Stars

Watchers

Forks

Packages

No packages published