Created
September 22, 2017 18:51
-
-
Save MartinElvar/32d7f6fb26809579cc71e30ffcc88a64 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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