Instantly share code, notes, and snippets.

Embed
What would you like to do?
import * from 'react';
export function mapNodes(connection, fn) {
return connection.edges.map(({ node }) => fn(node));
}
export function withLoading(Component) {
return (props) => {
if (props.data.loading) {
return <div>Loading...</div>;
}
return <Component {...props} />;
}
}
class LoadMoreButton extends React.Component {
render() {
const { data, path, children, ...otherProps } = this.props;
return (
<button {...otherProps} onClick={this.onClick}>
{children || 'Load more'}
</button>
);
}
onClick = () => {
loadMore(this.props.data, this.props.path);
}
}
import * from react;
import LoadMoreButton from 'LoadMoreButton';
import QUERY from './Query.graphql';
import { withLoading, mapNodes } from 'graphql';
import { graphql, compose } from 'react-apollo';
export function Content({ data }) {
return (
<div>
<h1>Posts</h1>
<div>
{mapNodes(data.allPosts, post => <PostItem key={post.id} post={post} />)}
</div>
<LoadMoreButton data={data} path="allPosts" />
</div>
);
}
export default compose(
graphql(QUERY),
withLoading,
)(Content);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment