swr useSWRInfinite example

Example: swr useSWRInfinite example

function getKey(index, previousPageData) {
return `/api/test?p=${index+1}`
}

async function fetcher(api) {
    //request to server
}

export default function Test7() {

    const {
        data,
        error,
        size,
        mutate,
        setSize,
        isValidating,
    } = useSWRInfinite(getKey, fetcher)


    const isLoadingInitialData = !data && !error
    const isLoadingMore =
        isLoadingInitialData ||
        (size > 0 && data && typeof data[size - 1] === 'undefined')
    const isEmpty = data?.[0]?.length === 0
    const isReachingEnd = getSafe(() => isEmpty || (data && data[0].pagination?.last_page <= size))

    const isRefreshing = isValidating && data && data.length === size

    const allData = useMemo(() => {
        return getSafe(() => {
            let res = [];
            _.forEach(data, d => {
                if (d?.data)
                    res = res.concat(d.data)
            })
            return res
        }, [])
    }, [data])
    
    
    return(
    	

				

                    showing {size} page(s) of {isLoadingMore ? '...' : allData?.length}{' '}
                    data(s){' '}
                
                

                     setSize(size + 1)}>
                        {isLoadingMore
                            ? 'loading...'
                            : isReachingEnd
                                ? 'no more issues'
                                : 'load more'}
                    
                     mutate()}>
                        {isRefreshing ? 'refreshing...' : 'refresh'}
                    
                     setSize(0)}>
                        clear
                    
                
                

                    {isEmpty ? 
Yay, no issues found.
 : }
                

                 {allData?.map((item, index) => {
                    return (
                        

                            {index} - {item}
                        
                    )
                })}
        
    )
}