diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index de14edbc7..c8982ffc5 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/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(
-
-
-
+
+
+
+
, document.querySelector('#coralStream'));
diff --git a/client/coral-plugin-stream/Stream.js b/client/coral-plugin-stream/Stream.js
new file mode 100644
index 000000000..2b87c2a2c
--- /dev/null
+++ b/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
...
;
+ }
+}
+
+// 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;
diff --git a/package.json b/package.json
index 85712bf5a..94cc8c504 100644
--- a/package.json
+++ b/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"
},