title: React Infinite Scroll with GraphQL
body: <p>i'm trying to wire up my page to fill more items via graphql on scroll utilizing infinite scroll. right now i'm running into the issue of the page refreshing on every scroll and then erroring out when it reaches the hasMore max. if anyone has any ideas on how to get this working, it would be a HUGE help. i'm using nextjs, typescript, graphql, and reactjs infinite scroll</p>
  
  <pre><code>import React, { useState } from 'react';
  import gql from 'graphql-tag';
  import InfiniteScroll from 'react-infinite-scroller';
  import { useQuery } from '@apollo/react-hooks';
  import { useRouter } from 'next/router';
  import { withApollo } from '../../lib/apollo';
  
  import { ErrorIndicator, LoadingIndicator, SubHeading } from '../../components/Atoms/';
  import { Card, SubNav } from '../../components/Molecules/';
  import { ArticleList, SixCards } from '../../components/Organisms/';
  import { BREAKPOINT } from '../../constants/';
  import { countryData } from '../../data/countryData';
  
  export const queryCreator = (categories, count): any =&gt; gql`
  {
    articles(lang: "en", categories: ["${categories}"], count: ${count}){
      id
      slug
      title
      content
      featuredImage
      creator {
        name
        id
      }
      categories {
        name
        id
      }
    }
  }
  `;
  
  export const News: React.FC = () =&gt; {
    const [articleListState, updateArticleList] = useState({
      count: 8,
      articleList: []
    });
  
    const { count, articleList } = articleListState;
    const router = useRouter();
    const { categories } = router.query;
    const categoriesToQuery = categories ? categories.toString() : '';
    const formattedQuery = queryCreator(categoriesToQuery, count);
    const { loading, error, data } = useQuery(formattedQuery);
  
    if (error) {
      return &lt;ErrorIndicator /&gt;;
    }
  
    if (loading) {
      return &lt;LoadingIndicator /&gt;;
    }
    const { articles } = data;
  
    // updateArticleList({ count: 8, articleList: articles });
  
    const hasMore = () =&gt; count &lt;= 13;
    const loadMore = () =&gt; {
      if (hasMore) {
        const addOne = count + 1;
        updateArticleList({ count: addOne, articleList: articles });
      }
    };
  
    const items = [];
  
    articleList.map((article) =&gt;
      items.push(
        article &amp;&amp; (
          &lt;div className="article" key={article.id}&gt;
            &lt;Card key={article.id} article={article} size="short" /&gt;
            &lt;style jsx&gt;{`
              .article {
                padding: 6px 0;
                margin: 0 auto;
              }
            `}&lt;/style&gt;
          &lt;/div&gt;
        )
      )
    );
    console.log(items, count);
    return (
      &lt;main className="articles-container"&gt;
        &lt;SubNav /&gt;
        &lt;SixCards articles={articles} /&gt;
        &lt;div className="article-list"&gt;
          &lt;InfiniteScroll
            pageStart={0}
            loadMore={loadMore}
            hasMore={hasMore()}
            loader={
              &lt;div key={0}&gt;
                &lt;SubHeading title="Loading . . ." Tag="h5" /&gt;
              &lt;/div&gt;
            }
          &gt;
            {items}
            {/* &lt;ArticleList articles={articleList} /&gt; */}
          &lt;/InfiniteScroll&gt;
        &lt;/div&gt;
        &lt;style jsx&gt;{`
          main.articles-container {
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            width: 80%;
            margin: 0 auto;
          }
  
          .article-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            // width: 100%;
            max-width: 1020px;
            margin: 10px auto;
            align-self: center;
          }
  
          @media only screen and (max-width: ${BREAKPOINT}px) {
            main.articles-container {
              width: 90%;
            }
          }
        `}&lt;/style&gt;
      &lt;/main&gt;
    );
  };
  
  export default withApollo(News);
  
  </code></pre>