Add graphql query

yet to have mutation though

package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "apollo-client-preset": "^1.0.8",
     "axios": "^0.18.0",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
     "lodash": "^4.17.10",
     "react": "^16.4.1",
+    "react-apollo": "^2.1.5",
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

src/components/Link.js

@@ -0,0 +1,22 @@
+
+
+import React, { Component } from 'react'
+
+class Link extends Component {
+  render() {
+    const { id, properties: { english, thai } } = this.props.node
+    return (
+      <div>
+        <div>
+          {id} ({english} - {thai})
+        </div>
+      </div>
+    )
+  }
+
+  _voteForLink = async () => {
+    // ... you'll implement this in chapter 6
+  }
+}
+
+export default Link

src/components/LinkList.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import Link from './Link'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
+
+class LinkList extends Component {
+  render() {
+    const { loading, theaters } = this.props.theaterQuery
+    console.log('theaters ---> ', theaters && theaters.edges.length)
+    console.log('theaters ---> ', theaters && theaters.edges.map(t => t.node.id ))
+    return (
+      <div>
+        { loading && 'loading' }
+        { theaters && <p>{theaters.edges.length}</p> }
+        { theaters && theaters.edges.map(t => <Link node={t.node} />) }
+      </div>
+    )
+  }
+}
+
+const THEATER_QUERY = gql`
+  query {
+    theaters(english_Icontains: "terminal") {
+      edges {
+        node {
+          id
+          geometry {
+            type
+            coordinates
+          }
+          properties {
+            english
+            thai
+            code
+          }
+        }
+      }
+    }
+  }
+`
+
+export default graphql(THEATER_QUERY, { name: 'theaterQuery' }) (LinkList)
+// export default LinkList

src/constants/Api.js

@@ -1,3 +1,5 @@
 
 export const URL = process.env.API_URL || '//localhost:8000'
 export const LOGIN = '/api-token-auth/'
+
+export const GRAPHQL_URI = process.env.GRAPHQL_URI || '//localhost:8000/graphql'

src/container/Gone.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { getToken, loggedIn } from '../reducers/auth'
 import { fetchAuth } from '../actions'
+import LinkList from '../components/LinkList'
 
 const Gone = (props) => (
   <div>
@@ -11,6 +12,9 @@ const Gone = (props) => (
     <hr />
     <Link to={`/`}>Main</Link>
 
+    <h1>LinkList</h1>
+
+    <LinkList />
     <hr />
     {props.loggedIn ? 'Logged in': 'Nah anonymous'}
     <hr />

src/index.js

@@ -10,15 +10,30 @@ import { persistStore } from 'redux-persist'
 import { PersistGate } from 'redux-persist/integration/react'
 import store from './store'
 
+import { ApolloProvider } from 'react-apollo'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+
+import { GRAPHQL_URI } from './constants/Api'
+
+const httpLink = new HttpLink({ uri: GRAPHQL_URI })
+
+const client = new ApolloClient({
+  link: httpLink,
+  cache: new InMemoryCache()
+})
 
 const persistor = persistStore(store)
 
 ReactDOM.render((
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
+      <ApolloProvider client={client}>
         <HashRouter>
           <App />
         </HashRouter>
+      </ApolloProvider>
     </PersistGate>
   </Provider>
 ), document.getElementById('root'))