has anyone here had luck with infinite scroll ? in my case i am doing a reddit clone build but i want to add a feature where instead of loading all posts when opening the page i want it to show only the lets say first 3 and then after i scroll he loads more i have accomplished what i want ( kinda ) problem is that he throws errors that i know whats the problem/why its happening but dont know a way to fix it my code

import { useQuery } from '@apollo/client'
import React, { useEffect, useState } from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
import { GET_ALL_POSTS, GET_ALL_POSTS_BY_TOPICO } from '../../graphql/queries'
import { Post_Subforum } from '../../typings'
import Post from './Post'

type Props = {
  topico?: string
}

function Feed({ topico }: Props) {
  const [length, setLength] = useState(0);
  const [hasMore, setHasMore] = useState(true);
  const { data, error } = !topico ?
    useQuery(GET_ALL_POSTS, {
      variables: {
        limit: 3,
        after: length,
      }
    })
    : useQuery(GET_ALL_POSTS_BY_TOPICO, {
      variables: {
        limit: 3,
        after: length,
        topico: topico,
      }
    })
  const [posts, setPosts] = useState<Post_Subforum[]>([]);

  console.log(length)

  useEffect(() => {
    setPosts(!topico ? data?.getPostList : data?.getPostListByTopico);
    setHasMore(length >= data?.getPostList.length ? false : true)
  })
  console.log(hasMore)

  const getMorePosts = () => {
    setLength(length + 3);
    const newPosts = [...posts, !topico ? data?.getPostList : data?.getPostListByTopico];
    setPosts(newPosts);
  };
  return (
    <div className="mt-5 space-y-4">
      <InfiniteScroll
        dataLength={length}
        next={getMorePosts}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
        endMessage={
          <p style={{ textAlign: "center" }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
      >
        {posts?.map((post) => (
          <Post key={post.id} post={post} />
        ))}
      </InfiniteScroll>
    </div>
  )
}

export default Feed

Hello @Diogovski! This thread has been automatically created from your message in #843999948717555735 a few seconds ago. We have already mentioned the @User so that they can see your message and help you as soon as possible! Want to unsubscribe from this thread? Right-click the thread in Discord (or use the ``...`` menu) and select "Leave Thread" to unsubscribe from future updates. Want to change the title? Use the ``/title`` command! We have solved your problem? Click the button below to archive it.