Limite do Firestore usando o componente react-infinite-scroll-scroll apenas com o limite fornecido

Question

Estou tentando criar um pergaminho infinito com minha lista de documentos do firestore usando o componente react-infinite-scroll. Defino o limite de 5 para teste. A rolagem infinita está funcionando, mas mostra apenas o limite de 5 listas fornecido:

atualmente, criei 25 listas diferentes e limito o firestore para mostrar 5 de cada vez:

list 1
list 2
list 3
list 4
list 5
loading more...

depois de carregar, ele carregará as mesmas 5 listas de volta e não carregará uma nova lista, e também carregará em um loop infinito com o limite 5 fornecido:

list 1
list 2
list 3
list 4
list 5
list 1
list 2
list 3
list 4
list 5
loading more...

aqui está meu código de exemplo abaixo para obter a consulta, coloquei-o em um useEffect porque estava em um envoltório do provedor de contexto na página do usuário e na página inicial, ambos usando rolagem infinita:

 import InfiniteScroll from 'react-infinite-scroll-component';

 const [list, setList] = useState([]);
 const [last, setLast] = useState(null);


 useEffect(() => {

   firestoreList
    .orderBy('createdAt', "desc")
    .limit(5)
    .get()
    .then((querySnapshot) => {
       const lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
       setLast(lastVisible.data());

       const postList = []
       querySnapshot.forEach((doc) => {
         postList.push(doc.data()); 
       })
       setList(postList);
    })
    .catch((err) => {
       console.log(err)
    })
  },[]};

este é o código para os dados de busca:

 const {list, last, setList } = ListContext(); 

 const fetchMoreData = () => {
    firestoreList
      .orderBy('createdAt', "desc")
      .startAfter(last)
      .limit(5)
      .get()
      .then(() => {
         setList(list.concat(list));
      })
      .catch((err) => {
         console.log(err)
      })
 };

e para o componente react-infinite-scroll:

   <InfiniteScroll
     dataLength={list.length}
     next={fetchMoreData}
     hasMore={true}
    >
       {list.map((a, i) => (
         <div key={i}>
           {a.allList}
         <div>
       ))}
   <InfiniteScroll>

Como defino corretamente o limite, faço a outra lista aparecer e interrompo o loop?

Answer 1

Finalmente consegui fazer funcionar agora, tive a ideia neste canal do youtube , e também deveria ter definido um lastVisible em meu fetchMoreData, e parar o loop que dá um erro de indefinido.

const {list, last, setList, setLast } = ListContext(); 

const [notify, setNotify] = useState(null);

const fetchMoreData = () => {
  const field = "createdAt";

  firestoreList
    .orderBy(field, "desc")
    .startAfter(last[field]) //from Fireship channel, which loads the next data
    .limit(5)
    .get()
    .then((querySnapshot) => {
       const lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];

       const postList = []
       querySnapshot.forEach((doc) => {
         postList.push(doc.data());
       })

       if (lastVisible !== undefined) {
         setList([...list, ...postList]);
         setLast(lastVisible.data());

       } else {
         setNotify("nothing to load.");
         return;
       }

    })
    .catch((err) => {
      console.log(err)
    })
};

Ele também funciona mesmo sem usar 'react-infinite-scroll-component', apenas usando useEffect.