Implement stream with data fetch

client/coral-embed-stream/src/index.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import {render} from 'react-dom';
-import CommentStream from './CommentStream';
-import {Provider} from 'react-redux';
-import {store} from '../../coral-framework';
+import ApolloClient, {createNetworkInterface} from 'apollo-client';
+import {ApolloProvider} from 'react-apollo';
+
+import Stream from '../../coral-plugin-stream/Stream';
+
+const client = new ApolloClient({
+  networkInterface: createNetworkInterface({uri: '/api/v1/graph/ql'})
+});
 
 render(
-    <Provider store={store}>
-      <CommentStream />
-    </Provider>
+    <ApolloProvider client={client}>
+      <Stream />
+    </ApolloProvider>
+
     , document.querySelector('#coralStream'));

client/coral-plugin-stream/Stream.js

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {graphql} from 'react-apollo';
+import gql from 'graphql-tag';
+
+const assetID = 'c82f9fbb-5cf6-4eeb-bde5-25bae78227d2';
+
+// MyComponent is a "presentational" or apollo-unaware component,
+// It could be a simple React class:
+class Stream extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentWillUpdate() {
+    console.log(this.props);
+  }
+
+  render() {
+    return <div>...</div>;
+  }
+}
+
+// Initialize GraphQL queries or mutations with the `gql` tag
+const StreamQuery = gql`fragment commentView on Comment {
+  body
+  user {
+    name: displayName
+  }
+  actions {
+    type: action_type
+    count
+    current: current_user {
+      id
+      created_at
+    }
+  }
+}
+
+query AssetQuery($asset_id: ID!) {
+  asset(id: $asset_id) {
+    title
+    url
+    comments {
+      ...commentView
+      replies {
+        ...commentView
+      }
+    }
+  }
+}`;
+
+// We then can use `graphql` to pass the query results returned by MyQuery
+// to MyComponent as a prop (and update them as the results change)
+const StreamWithData = graphql(StreamQuery, {options: {variables: {asset_id: assetID}}})(Stream);
+
+export default StreamWithData;

package.json

@@ -48,6 +48,7 @@
   },
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
+    "apollo-client": "^0.7.3",
     "bcrypt": "^0.8.7",
     "body-parser": "^1.15.2",
     "cli-table": "^0.3.1",
@@ -63,6 +64,7 @@
     "express-session": "^1.14.2",
     "graphql": "^0.8.2",
     "graphql-server-express": "^0.5.0",
+    "graphql-tag": "^1.2.3",
     "graphql-tools": "^0.9.0",
     "helmet": "^3.1.0",
     "jsonwebtoken": "^7.1.9",
@@ -78,6 +80,7 @@
     "passport-facebook": "^2.1.1",
     "passport-local": "^1.0.0",
     "prompt": "^1.0.0",
+    "react-apollo": "^0.8.1",
     "redis": "^2.6.3",
     "uuid": "^2.0.3"
   },