Added Rendered Props Query

client/src/App.js

@@ -1,15 +1,11 @@
 import React, { Component } from "react";
-import { compose, graphql } from "react-apollo";
 
-import { GET_TWEETS } from "./graphql/queries";
+import Board from "./components/Board";
 import logo from "./logo.svg";
 import "./App.css";
 
 class App extends Component {
   render() {
-    console.log(this.props);
-    const { loading, data: { getTweets } } = this.props;
-    console.log(getTweets);
     return (
       <div className="App">
         <header className="App-header">
@@ -24,15 +20,16 @@ class App extends Component {
             Read about this{" "}
             <a href="https://github.com/apollographql/ticketmaster-rest-api-wrapper">
               server on GitHub
-            </a>.
+            </a>
           </p>
         </header>
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <Board />
       </div>
     );
   }
 }
 
-export default compose(graphql(GET_TWEETS))(App);
+export default App;

client/src/components/Board.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import { Query } from "react-apollo";
+
+import { GET_TWEETS } from "../graphql/queries";
+
+class Board extends Component {
+  render() {
+    return (
+      <Query query={GET_TWEETS}>
+        {({ loading, error, data: { getTweets } }) => {
+          if (loading) {
+            return <h3>Loading...</h3>;
+          }
+          if (error) {
+            return <h3>Oh No!!!</h3>;
+          }
+          return getTweets.map(t => (
+            <div>
+              <h2>{t.text}</h2>
+              <h3>{t._id}</h3>
+              <h3>{t.createdAt}</h3>
+            </div>
+          ));
+        }}
+      </Query>
+    );
+  }
+}
+
+export default Board;