title: Getting duplicate elements in react component after fetchMore
body: <p>I want to <code>fetchMore</code> data when <code>onscroll</code> reaches the bottom. The issue I have is that I get duplicate elements thus console yelling at me as well that I nee <code>unique element keys</code>. I'm getting the correct data in the graphql playground so it's an issue in my <code>react</code> component. Does this logic make sense? What's going wrong here?</p>
  
  <pre><code>class App extends Component {
    isBottom = (fetchMore, data) =&gt; {
      window.onscroll = () =&gt; {
        if (
          data &amp;&amp;
          data.infiniteScrollMovies &amp;&amp;
          data.infiniteScrollMovies.hasMore &amp;&amp;
          window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight
        ) {
          console.log('YES!')
          this.fetchMoreData(fetchMore, data)
        }
      }
    }
  
    fetchMoreData = (fetchMore, data) =&gt; {
      fetchMore({
        variables: {
          offset: data.infiniteScrollMovies.newOffset,
        },
        updateQuery: (prev, { fetchMoreResult }) =&gt; {
          if (!fetchMoreResult) return prev
  
          return {
            ...fetchMoreResult,
            infiniteScrollMovies: {
              ...fetchMoreResult.infiniteScrollMovies,
              movies: [...prev.infiniteScrollMovies.movies, ...fetchMoreResult.infiniteScrollMovies.movies],
            },
          }
        },
      })
    }
  
    render() {
      return (
        &lt;div className="flex flex-column"&gt;
          &lt;Query query={ALL_MOVIES} notifyOnNetworkStatusChange={true} fetchPolicy="network-only"&gt;
            {({ data, loading, error, fetchMore }) =&gt; {
              if (error) return &lt;h1&gt;{error.message}&lt;/h1&gt;
              this.isBottom(fetchMore, data)
              return (
                &lt;div&gt;
                  {data &amp;&amp;
                    data.infiniteScrollMovies &amp;&amp;
                    data.infiniteScrollMovies.movies.map(m =&gt; (
                      &lt;article key={m.id}&gt;
                      // ... rendering an element
                      &lt;/article&gt;
                    ))}
             &lt;div&gt;{loading &amp;&amp; &lt;h1 className="red text-center"&gt;Loading...&lt;/h1&gt;}&lt;/div&gt;
  </code></pre>
  
  <p>Here's my query:</p>
  
  <pre><code>export const ALL_MOVIES = gql`
    query infiniteScrollMovies($offset: Int) {
      infiniteScrollMovies(offset: $offset, limit: 16) {
        movies {
          image_url
          title
          id
        }
        hasMore
        newOffset
      }
    }
  `
  </code></pre>