reactjs - fetch后在 react 组件中获取重复元素更多

Question

我想在 onscroll 到达底部时 fetchMore 数据。我遇到的问题是我得到了重复的元素，因此控制台对我大喊大叫，我需要 unique element keys。我在 graphql playground 中获得了正确的数据，所以这是我的 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

使用 updataeQuery 中的 variables 参数来处理这种情况，基本上，如果已经完成，您需要防止在缓存中追加。

将您的 updateQuery 更改为以下内容

        updateQuery: (prev, { variables, fetchMoreResult }) => {
// Return the prev values, if it allready has the length specified by offset
// thereby preventing duplicate values in cache.
                        if (!fetchMoreResult || 
                           prev.infiniteScrollMovies.movies.length > variables.offset) 
                         return prev