CODEWITHSUNDEEP
typescriptnext.jsswrreact-infinite-scroll-component
fuwa07
fuwa07

Reputation: 93

React Infinite Scrolling with SWRInfinite does first call multiple times

I've created a useGetItems hook which imports the usePagination hook, each time I scroll it does the first call history again. It looks like this and I do not understand why it does that

in my Items Model I added the method

export function useGetAllItems(){
    return usePagination<Item>('/api/items')
}

usePagination in my hooks.ts

export const usePagination = <T>(url:string){
    const getKey = (pageIndex:number, prevoiusPageData: T[])=>{
    pageIndex +=1
    if(previousPageData && !previousPageData.length) return null
        return `${url}?_page=${pageIndex}&_limit=40`
    }

    const {data, size, setSize, error, mute} = useSWRInfinite(getKey, fetcher)
    const paginatedData: T[] = data?.flat() as T[]
    const dataArrLen = data ? data.length -1 : 0
    const innerDataArr = data ? data[dataArrLen] as T[]: []
    const isReachedEnd = data && innerDataArr.length < 40
    const loadingMore = data && typeof data[size-1] === 'undefined'
    return  {
        paginatedDatam isRechedEnd, loadingMore, size, setSize, error, mute
    }
}

api/items the index.ts looks like this

const getAllItems = async(request) => {
    let { _page, _limit} = request.query
    if(_page && _limit)
    {
        const itemsDao = new ItemDao()
        let page = parseInt(_page)
        let limit = parseInt (_limit)
        limit = (page-1) * limit < 40 ? 40 : (page-1)*limit
        const allItems = await itemsDao.getAllItems(limit)
        return new JsonResult(200, allItems)
    }
    return new JsonResult(200, {})
}

the dao looks like this

export class ItemDao extends Database{
    public async getAllItems(limit: number){
        const generatedData = JSON.parse(JSON.stringify(randomItems))
        const itemsJson2Array = Object.values(generatedData)
        const items = []
        const offset = limit -40 < 0 ? 0 : limit-40
        for (let i = offset; i < limit ; i++){
            if(ItemsSchema.safeParse(itemsJson2Array[i].success){
                items.push(itemsJson2Array[i])
            }
            return items
        }
    }
}

my itemsPage.tsx has use all of that like that

const {paginatedData, setSize, isReachedEnd} = useGetAllItems()

return (
    <>
        <InfiniteScroll next={()=>setSize(_size=> _size+1)} hasMore=(!isReachedEnd) ... >
            <ItemsCard items={paginatedData} />
        </InfiniteScroll>
    </>
)

Upvotes: 1

Views: 862

Answers (1)

marfoldi
marfoldi

Reputation: 13

Set revalidateFirstPage to false.

Upvotes: 1

Related Questions