diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js
index a853efead..3eb12b04f 100644
--- a/client/coral-embed-stream/src/Embed.js
+++ b/client/coral-embed-stream/src/Embed.js
@@ -3,7 +3,7 @@ import {compose} from 'react-apollo';
import {connect} from 'react-redux';
import isEqual from 'lodash/isEqual';
-import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
+import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui';
const {logout, showSignInDialog, requestConfirmEmail} = authActions;
const {addNotification, clearNotification} = notificationActions;
@@ -77,6 +77,17 @@ class Embed extends Component {
}
}
+ loadMoreComments = () => {
+ this.props.loadMore({
+ limit: 10,
+ cursor: new Date(),
+ asset_id: this.props.asset.id,
+ sort: 'REVERSE_CHRONOLOGICAL'
+ })
+ .then((result) => console.log('result', result))
+ .catch((err) => console.log('err', err));
+ }
+
render () {
const {activeTab} = this.state;
const {closedAt} = this.props.asset;
@@ -95,6 +106,8 @@ class Embed extends Component {
return ;
}
+ console.log('Render', this.props.data);
+
return (
@@ -155,6 +168,10 @@ class Embed extends Component {
clearNotification={this.props.clearNotification}
notification={{text: null}}
/>
+
({
+ data,
+ loadMore: ({limit, cursor, parent_id, asset_id, sort}) => {
+ return data.fetchMore({
+ query: LOAD_MORE,
+ variables: {
+ limit,
+ cursor,
+ parent_id,
+ asset_id,
+ sort
+ },
+ updateQuery: ({asset}, {fetchMoreResult:{data:{new_top_level_comments}}}) => {
+ const comments = asset.comments.concat(new_top_level_comments);
+ return {
+ asset: {
+ ...asset,
+ comments
+ }
+ };
+ }
+ });
+ }
})
});
diff --git a/client/coral-framework/graphql/queries/loadMore.graphql b/client/coral-framework/graphql/queries/loadMore.graphql
new file mode 100644
index 000000000..a85eaecca
--- /dev/null
+++ b/client/coral-framework/graphql/queries/loadMore.graphql
@@ -0,0 +1,7 @@
+#import "../fragments/commentView.graphql"
+
+query LoadMoreComments($limit: Int = 5, $cursor: Date, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER) {
+ new_top_level_comments: comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort}) {
+ ...commentView
+ }
+}
diff --git a/client/coral-framework/graphql/queries/streamQuery.graphql b/client/coral-framework/graphql/queries/streamQuery.graphql
index 583a2db13..bfd7cee33 100644
--- a/client/coral-framework/graphql/queries/streamQuery.graphql
+++ b/client/coral-framework/graphql/queries/streamQuery.graphql
@@ -18,9 +18,9 @@ query AssetQuery($asset_url: String!) {
requireEmailConfirmation
}
commentCount
- comments {
+ comments(limit: 2) {
...commentView
- replies {
+ replies(limit: 2) {
...commentView
}
}
diff --git a/package.json b/package.json
index 548119cfc..048d487be 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
},
"homepage": "https://github.com/coralproject/talk#readme",
"dependencies": {
- "apollo-client": "^0.7.3",
+ "apollo-client": "^0.8.3",
"bcrypt": "^0.8.7",
"body-parser": "^1.15.2",
"cli-table": "^0.3.1",
@@ -82,7 +82,7 @@
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-local": "^1.0.0",
- "react-apollo": "^0.8.1",
+ "react-apollo": "^0.10.0",
"redis": "^2.6.3",
"uuid": "^2.0.3"
},