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

import React, { Component } from "react"
import { Query } from "react-apollo"

import { LoadingScreen } from "../../common/LoadingScreen"
import Main from "../../common/Main"

import storyListQuery from "./gql/StoryList";

export class StoryList extends Component {
  render() {
    const { stories } = this.props

    return (
      <Main className="StoryList">
        { stories.map(s => <h1>{s.name}</h1>) }
      </Main>
    )
  }
}

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

      console.log(filter);

      return <StoryList {...data} />
    }}
  </Query>
)