Skip to content

Instantly share code, notes, and snippets.

@MartinElvar
Created September 22, 2017 18:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MartinElvar/32d7f6fb26809579cc71e30ffcc88a64 to your computer and use it in GitHub Desktop.
Save MartinElvar/32d7f6fb26809579cc71e30ffcc88a64 to your computer and use it in GitHub Desktop.
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Container, Row, Col } from "reactstrap";
import { graphql } from "react-apollo";
import { withRouter } from "react-router";
import ArticleCard from "../../components/ArticleCard";
import Paginator from "../../components/Paginator";
import TAG_QUERY from "../../graphql/queries/TagQuery.graphql";
import MORE_ARTICLES_TAG_QUERY from "../../graphql/queries/MoreArticlesTagQuery.graphql";
@withRouter
@graphql(TAG_QUERY, {
options: (ownProps) => ({
variables: {
slug: ownProps.match.params.categoryId,
},
}),
props: (data) => {
console.log(data);
return {
...data,
fetchMore() {
console.log("test");
const cursor = data.tag.categorizedArticles.pop().insertedAt;
return data.fetchMore({
query: MORE_ARTICLES_TAG_QUERY,
variables: {
slug: data.tag.slug,
cursor,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
const previousEntry = previousResult.entry;
const newArticles = fetchMoreResult.tag.moreCategorizedArticles.articles;
const newCursor = fetchMoreResult.tag.moreCategorizedArticles.cursors.after;
return {
// By returning `cursor` here, we update the `loadMore` function
// to the new cursor.
cursor: newCursor,
entry: {
// Put the new comments in the front of the list
articles: [...newArticles, ...previousEntry.articles],
},
};
},
});
},
};
},
})
export default class CategoryPage extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
}
renderArticles() {
const articles = this.props.data.tag.categorizedArticles;
if (articles.length === 0) {
return <p>Sorry no articles posted.</p>;
}
return articles.map((article) => (<ArticleCard key={ article.id } article={ article } />));
}
render() {
const data = this.props.data;
if (data.loading) {
return <div>Loading...</div>;
}
return (
<Container>
<Row>
<Col>
<h1>{ data.tag.name }</h1>
<hr />
</Col>
</Row>
<Row>
<Col>
{ this.renderArticles() }
</Col>
</Row>
<Row>
<Col>
<Paginator loadMore={ data.fetchMore } />
</Col>
</Row>
</Container>
);
}
}
/*
When fetchMore is trigger i get
ObservableQuery.js:128 Uncaught Error: updateQuery option is required. This function defines how to update the query data with the new results.
at ObservableQuery.../../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.fetchMore (ObservableQuery.js:128)
at Button.onClick (reactstrap.es.js:1183)
at Object.../../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
at executeDispatch (EventPluginUtils.js:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
at executeDispatchesAndRelease (EventPluginHub.js:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
at Array.forEach (<anonymous>)
at forEachAccumulated (forEachAccumulated.js:24)
at Object.processEventQueue (EventPluginHub.js:254)
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment