score:0

this is a react query useinfinitequery() example, assuming you have:

data: {
  pages: [
    {/*a page*/
      results:[
        {/*an item*/
          /*...*/
        }
      ]
    }
  ]
}

set your datalength this way:

const {issuccess, 
       isloading, 
       iserror, 
       data, 
       error, 
       hasnextpage, 
       fetchnextpage, 
       isfetchingnextpage
      } = useinfinitequery(
        path /*your query path here*/,
        fetchfn /*your fetch function here*/);
return <div>
    {iserror && <div>error! {error?.message}</div>}
    {isloading && <div>loading...</div>}
    {issuccess && data?.pages && (
        <div>
            <listheader isfetching={isfetchingnextpage} data={data}/>
            <infinitescroll
                datalength={data.pages.reduce((acc, page) => acc + page.results.length, 0)}
                next={fetchnextpage}
                hasmore={hasnextpage}
                loader={<div>loading...</div>}
                endmessage={<p>- you have seen it all -</p>}
            >
                {data.pages.map((page, i)=> (
                    <fragment key={i+''}>
                    {page.results.map((item, j)=> (
                        <listitem key={i+'.'+j} path={path} item={item}/>
                    ))}
                </fragment>
                ))}
            </infinitescroll>
        </div>
    )}
</div>

where listheader and listitem are components of your own.

score:20

i had this issue. it turns out i was using datalength in the wrong way. i thought it was supposed to be the total length of items that could be displayed, but instead, it seems it should be the length of items that are currently displayed, so the correct way is should be something like this:

    <infinitescroll
      datalength={page * 10}
      pulldowntorefreshthreshold={50}
      next={loadmoreconversation}
      scrollabletarget="scrollablediv"
      hasmore={true}
      loader={<h4>loading...</h4>}
    >
      <chatitemlist
        chatitems={chatitems}
        isindeletemode={deleteactive}
        onbottomdrawerhandler={onbottomdrawerhandler}
      />
    </infinitescroll>

in this case, i load 10 items per page. i hope this helps you because i searched a lot and did not find an answer until i reached it with all the effort and error.


Related Query

More Query from same tag