Setup React-Storybooks with React-Apollo

Question

Is there any way to use React-Apollo with React-Storybooks? Previously I was trying out Relay and there is a module (https://github.com/orta/react-storybooks-relay-container) that allowed for creating stub containers that wouldn't require network access but used static data.

Is there an equivalent for the React-Apollo framework? http://dev.apollodata.com/react/

FWIW I'm working with React-Native but the idea and setup behind everything should be very similar (For example I'm using https://github.com/storybooks/react-native-storybook instead of the web based solution)

Answer 1

Well, this is a quite old question but I will post an answer here for any further dev partner that needs the answer. please if this is good for someone and it is not clear enough just let me know and I will update my answer

In order to make it work (react-apollo and react-storybook) you have few approaches from which my favorite will be to use MockedProvider from react-apollo what you basically want to do is to tell your UI that whenever an expected request is fired it should response with an expected response, so let's make an example using a component <Avatar> that needs the user data to render properly:

Avatar.js

class Avatar {
   // ...
   render() {
       // pretty avatar layout
   }
}

export const COLLABORATOR_QUERY = gql`
  query GetCollaborator($id: ID!) {
    Collaborator(id: $id) {
      id
      firstName
      lastName
      avatarImgUrl
    }
  }
`;

const AvatarWithData = graphql(
  COLLABORATOR_QUERY, {
    options: {
      variables: {
        // let's suppose that we got a static variable here to simplify the example
        id: '1'
      }
    }
  }
)(Avatar);

export default AvatarWithData;

.stories/index.js

import { addTypenameToDocument } from 'apollo-client/queries/queryTransform';
import { MockedProvider } from 'react-apollo/lib/test-utils';
import { COLLABORATOR_QUERY } from '../js/components/Avatar';
import Avatar from '../js/components/Avatar';

const mockedData = {
  Collaborator: {
    id: '1',
    firstName: 'Char',
    lastName: 'Mander',
    avatarImgUrl: 'https://img.pokemondb.net/artwork/charmander.jpg',
    __typename: 'Collaborator'
  }
};

const query = addTypenameToDocument(USER_QUERY);
const variables = { id: '1' };
let mocks = [{ request: { query, variables }, result: { data: mockedData } }];

storiesOf('Mocked', module)
  .addDecorator((story) => (
      <MockedProvider mocks={mocks}>
         {story()}
      </MockedProvider>
  )).add('Avatar', () => {
      return (<Avatar />);
  });

I got some issues with this addTypenameToDocument import cause they use typescript and with my boilerplate create-react-app there is something wrong, but what I have done is to include the logic in that file within my project (very dirty, sorry for that).

UPDATE: to avoid issue importing addTypenameToDocument what I have done as I am using create-react-project is to run eject command and add the following to the package.json jest configuration:

"transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\](?!(apollo-client)/).+\\.(js|jsx)$"]

The issue s that the guys at apollo-client has es6 within their builded files and you will get syntax error, on top of that if you are using react storybook you may wanted to add this configuration to the webpack config of storybook.

BEFORE DOING ALL OF THAT I have found this: https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7abl on the Test section there is an excellent approach too (almost the same) but they do not use the addTypenameToDocument I haven't try myself yet but if it works you will be able to test without run the eject command of react-create-project

Other than that, you should be sure that your query and variables match exact the same that the request made by your UI component otherwise you will receive an error that not mocked found, and then you are ready to roll.