const MoreCommentsQuery = gql`
  query MoreComments($cursor: String) {
    moreComments(cursor: $cursor) {
      cursor
      comments {
        author
        text
      }
    }
  }
`;

const CommentsWithData = () => (
  <Query query={CommentsQuery}>
    {({ data: { comments, cursor }, loading, fetchMore }) => (
      <Comments
        entries={comments || []}
        onLoadMore={() =>
          fetchMore({
            // note this is a different query than the one used in the
            // Query component
            query: MoreCommentsQuery,
            variables: { cursor: cursor },
            updateQuery: (previousResult, { fetchMoreResult }) => {
              const previousEntry = previousResult.entry;
              const newComments = fetchMoreResult.moreComments.comments;
              const newCursor = fetchMoreResult.moreComments.cursor;

              return {
                // By returning `cursor` here, we update the `fetchMore` function
                // to the new cursor.
                cursor: newCursor,
                entry: {
                  // Put the new comments in the front of the list
                  comments: [...newComments, ...previousEntry.comments]
                }
              };
            }
          })
        }
      />
    )}
  </Query>
);