apollo2.app.js

// แสดงเฉพาะสิ่งที่สำคัญ
// ...

import { graphql } from 'react-apollo'
import gql from 'graphql-tag';

class App extends Component {

// ...
  render() {
    // get allfilms props from graphql
    const data = this.props.data
    // data.loading นั้นเป็น default props ที่ graphql ส่งมาให้เลยนะ
    if (data.loading) {
      return (<Spinner />)
    } else {
      return (
        <Container>
          <Header><Title>Favorite Movie</Title></Header>
          <Content>
            
            <List 
              dataArray={data.allFilms.edges} 
              renderRow={this.renderRow.bind(this)} />
            <ModalView 
              title={this.state.title}
              detail={this.state.detail}
              visible={this.state.modalVisible} 
              onDismiss={()=> this.setModalVisible(false)}/>            
            
          </Content>        
        </Container>)
      } 
    }

}
// query with graphql style..
const gqlQuery = gql`
  query {
    allFilms {
      edges {
        node {
          id
          title
          openingCrawl
          director
          releaseDate
        }
      }
    }
  }
`
// combind graphql to component
export default graphql(gqlQuery)(App)