Получение повторяющихся элементов в компоненте реакции после fetchMore

Question

Я хочу fetchMore данных, когда onscroll достигнет дна.У меня проблема в том, что я получаю дубликаты элементов, таким образом, консоль кричит на меня, что мне нужно unique element keys.Я получаю правильные данные на игровой площадке graphql, поэтому это проблема в моем react компоненте.Имеет ли эта логика смысл?Что здесь не так?

class App extends Component {
  isBottom = (fetchMore, data) => {
    window.onscroll = () => {
      if (
        data &&
        data.infiniteScrollMovies &&
        data.infiniteScrollMovies.hasMore &&
        window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight
      ) {
        console.log('YES!')
        this.fetchMoreData(fetchMore, data)
      }
    }
  }

  fetchMoreData = (fetchMore, data) => {
    fetchMore({
      variables: {
        offset: data.infiniteScrollMovies.newOffset,
      },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev

        return {
          ...fetchMoreResult,
          infiniteScrollMovies: {
            ...fetchMoreResult.infiniteScrollMovies,
            movies: [...prev.infiniteScrollMovies.movies, ...fetchMoreResult.infiniteScrollMovies.movies],
          },
        }
      },
    })
  }

  render() {
    return (
      <div className="flex flex-column">
        <Query query={ALL_MOVIES} notifyOnNetworkStatusChange={true} fetchPolicy="network-only">
          {({ data, loading, error, fetchMore }) => {
            if (error) return <h1>{error.message}</h1>
            this.isBottom(fetchMore, data)
            return (
              <div>
                {data &&
                  data.infiniteScrollMovies &&
                  data.infiniteScrollMovies.movies.map(m => (
                    <article key={m.id}>
                    // ... rendering an element
                    </article>
                  ))}
           <div>{loading && <h1 className="red text-center">Loading...</h1>}</div>

Вот мой запрос:

export const ALL_MOVIES = gql`
  query infiniteScrollMovies($offset: Int) {
    infiniteScrollMovies(offset: $offset, limit: 16) {
      movies {
        image_url
        title
        id
      }
      hasMore
      newOffset
    }
  }
`

Answer 1

попробуйте отключить опцию notifyOnNetworkStatusChange