api/rpdata-ui/src/routes/story/StoryRoot.js

import React, { Component } from 'react';
import { Query } from 'react-apollo';

import Background from '../../common/Background';
import StoryMenu from './StoryMenu';

import storyRootQuery from "./gql/StoryRoot";
import { LoadingScreen } from '../../common/LoadingScreen';

export class StoryIndex extends Component {
  render() {
    const categories = this.props.categoryType.enumValues.map(ev => ev.name).sort()

    return (
      <div className="StoryIndex theme-story">
        <Background />
        <StoryMenu categories={categories} />
      </div>
    )
  }
}

export default () => (
  <Query query={storyRootQuery}>
    {({ loading, error, data }) => {
      if (loading) return <LoadingScreen className="theme-story" />;
      if (error) return `Error! ${error.message}`;

      return <StoryIndex {...data} />
    }}
  </Query>
);