import gql from 'graphql-tag' import { graphql } from 'react-apollo' import PostUpvoter from './PostUpvoter' const POSTS_PER_PAGE = 10 function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) { if (loading) { return
Loading
} const areMorePosts = allPosts.length < _allPostsMeta.count return (
{areMorePosts ? : ''}
) } const allPosts = gql` query allPosts($first: Int!, $skip: Int!) { allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) { id title votes url createdAt }, _allPostsMeta { count } } ` // The `graphql` wrapper executes a GraphQL query and makes the results // available on the `data` prop of the wrapped component (PostList) export default graphql(allPosts, { options: { variables: { skip: 0, first: POSTS_PER_PAGE } }, props: ({ data }) => ({ data, loadMorePosts: () => { return data.fetchMore({ variables: { skip: data.allPosts.length }, updateQuery: (previousResult, { fetchMoreResult }) => { if (!fetchMoreResult.data) { return previousResult } return Object.assign({}, previousResult, { // Append the new posts results to the old one allPosts: [...previousResult.allPosts, ...fetchMoreResult.data.allPosts] }) } }) } }) })(PostList)