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" },