React query useInfiniteQuery (v3) and react table (v7) for server side pagination
Anyone has every connected react-query v3 with react-table v7 ? Im trying to implement a server side paginator with infinite scrolling doing:
And everything seems ok if I implement custom button paginators like:
but have weird behavior on the custom table paginator that react-table renders:
const {
data: devicesData,
isFetching,
fetchNextPage,
fetchPreviousPage,
hasNextPage,
isFetchingNextPage,
hasPreviousPage,
isFetchingPreviousPage
} = useDevices({}, pageNumber, pageSize)const {
data: devicesData,
isFetching,
fetchNextPage,
fetchPreviousPage,
hasNextPage,
isFetchingNextPage,
hasPreviousPage,
isFetchingPreviousPage
} = useDevices({}, pageNumber, pageSize)And everything seems ok if I implement custom button paginators like:
<button onClick={() => gotoPage(0)} disabled={!hasPreviousPage || isFetchingPreviousPage}>
{'<<'}
</button>{' '}
<button
onClick={() => previousPage()}
disabled={!hasPreviousPage || isFetchingPreviousPage}
>
{'<'}
</button>{' '}
<button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
{'>'}
</button>{' '}
<button
onClick={() => gotoPage(pageOptions.length - 1)}
disabled={!hasNextPage || isFetchingNextPage}
>
{'>>'}<button onClick={() => gotoPage(0)} disabled={!hasPreviousPage || isFetchingPreviousPage}>
{'<<'}
</button>{' '}
<button
onClick={() => previousPage()}
disabled={!hasPreviousPage || isFetchingPreviousPage}
>
{'<'}
</button>{' '}
<button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
{'>'}
</button>{' '}
<button
onClick={() => gotoPage(pageOptions.length - 1)}
disabled={!hasNextPage || isFetchingNextPage}
>
{'>>'}but have weird behavior on the custom table paginator that react-table renders:
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage
// Get the state from the instance
} = useTable(
{
//@ts-ignore
columns,
nextPage: () => setPageNumber(pageNumber + 1),
previousPage: () => setPageNumber(pageNumber - 1),
//nextPage: fetchNextPage(),
//previousPage: fetchPreviousPage(),
data: devicesByStatus,
state: {
pageNumber,
pageSize
},
manualPagination: true // Set to false to let useTable handle pagination
},
usePagination
) const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage
// Get the state from the instance
} = useTable(
{
//@ts-ignore
columns,
nextPage: () => setPageNumber(pageNumber + 1),
previousPage: () => setPageNumber(pageNumber - 1),
//nextPage: fetchNextPage(),
//previousPage: fetchPreviousPage(),
data: devicesByStatus,
state: {
pageNumber,
pageSize
},
manualPagination: true // Set to false to let useTable handle pagination
},
usePagination
)