TTC
Theo's Typesafe Cult•12mo ago
Knox

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: 
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
  )
5 Replies
dan
dan•12mo ago
There is an example on tanstack/table that might be useful to you https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-infinite-scrolling
React Table Virtualized Infinite Scrolling Example | TanStack Table...
An example showing how to implement Virtualized Infinite Scrolling in React Table
Knox
KnoxOP•12mo ago
Im using v7 but I see there is something like a prepareRow thing, so I wouldn't need to use useInfiniteQuery ? My head I think one of my problems is not being able to get the entire length of teh object if im calling it straight with limit and offser 
const useDevices = <T = Device[]>(
  options?: UseQueryOptions<QueryResult, AxiosError, T>,
  page?: number,
  pageSize?: number
) => {
  const queryClient = useQueryClient()
  return useInfiniteQuery(
    ['devices', page, pageSize],
    async ({ pageParam = 1 }) => {
      const offset = (pageParam - 1) * pageSize 

      queryClient.cancelQueries('device')
      const { data } = await Axios.get<Device[]>(`devices?limit=${pageSize}&offset=${offset}`)
      return { data, pageParam: pageParam + 1 }
    },
    {
      getNextPageParam: lastPage => lastPage.pageParam,
      getPreviousPageParam: firstPage =>
        firstPage.pageParam > 1 ? firstPage.pageParam - 1 : undefined,

      keepPreviousData: true,
      refetchOnWindowFocus: false,
      staleTime: Infinity,
      ...options
    }
  )
}
const useDevices = <T = Device[]>(
  options?: UseQueryOptions<QueryResult, AxiosError, T>,
  page?: number,
  pageSize?: number
) => {
  const queryClient = useQueryClient()
  return useInfiniteQuery(
    ['devices', page, pageSize],
    async ({ pageParam = 1 }) => {
      const offset = (pageParam - 1) * pageSize 

      queryClient.cancelQueries('device')
      const { data } = await Axios.get<Device[]>(`devices?limit=${pageSize}&offset=${offset}`)
      return { data, pageParam: pageParam + 1 }
    },
    {
      getNextPageParam: lastPage => lastPage.pageParam,
      getPreviousPageParam: firstPage =>
        firstPage.pageParam > 1 ? firstPage.pageParam - 1 : undefined,

      keepPreviousData: true,
      refetchOnWindowFocus: false,
      staleTime: Infinity,
      ...options
    }
  )
}
I should probably slice it like in the example you provided. I need a break tbh
Knox
KnoxOP•12mo ago
@dan https://stackoverflow.com/questions/78111466/implement-server-side-pagination-with-react-query-v3-and-react-table-v7 I posted here if you wanna take a look. I think I dont need useInfiniteQuery and what is happening now is that the built in pagination only shows when I manually change the state. The state paginator was built just for testing purposes, still unsure why the built in paginator doesn't show on page load. I feel I'm doing two different things here
Stack Overflow
Implement server side pagination with react query v3 and react tabl...
Im trying to implement server side pagination using react query at v3 and react table at v7. Im trying some things and created a custom paginator because I want not seeing the virtual paginator fro...
Knox
KnoxOP•12mo ago
And both the wrong way
Knox
KnoxOP•12mo ago
im really blind on this

Did you find this page helpful?