Reusable generic table with (Redux Toolkit) RTK Query server-side data fetching

[phretor]

Hi all,

I'm trying to build a reusable, generic table based on react-table + redux-toolkit but I'm struggling with hooks that call hooks. I need re-fetch the data whenever pageIndex changes.

Line 53:11:  React Hook "useReadHitsHitsGetQuery" cannot be called inside a callback.
React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

I understand the reason behind this error, but in my use case I can't find a solution that doesn't rely on a callback.

import dayjs from "dayjs";
import React, { useMemo, useState } from "react";
import { GenericTable } from "./GenericTable";
import { useReadHitsHitsGetQuery } from '../service/scannerApi';
export default function HitsList() {
  const defaultPageSize = 10;
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)
  const [pageCount, setPageCount] = useState(0)
  const columns = useMemo(() => [
    {
      Header: "IP",
      accessor: "from_ip"
    },
    {
      Header: "Port",
      accessor: "from_port"
    },
    {
      Header: "Times",
      accessor: "counter"
    },
    {
      Header: "First Seen",
      accessor: "first_seen",
      Cell: ({ cell: { value } }) => (dayjs(value).format())
    },
    {
      Header: "Last Seen",
      accessor: "last_seen",
      Cell: ({ cell: { value } }) => (dayjs(value).format())
    },
    {
      Header: "Size",
      accessor: "size"
    },
    {
      Header: "Vendor",
      accessor: "vendor"
    },
  ])

  const useData = ({ pageIndex, pageSize }) => {
    useEffect(() => {
      const {
        data: result,
        isLoading,
        isFetching,
        isSuccess
      } = useReadHitsHitsGetQuery({
        page: pageIndex,
        size: pageSize
      });

      setLoading(isLoading || isFetching)
      setData(isSuccess ? result?.items : [])
      setPageCount(isSuccess ? result?.total : 0)
    })
  }

  return (
    <>
      <GenericTable
        useData={useData}
        loading={loading}
        columns={columns}
        pageCount={pageCount}
        defaultPageSize={defaultPageSize}
        data={data}
      />
    </>
  );
};

import { useEffect, useState } from "react";
import { Card, Pagination } from 'react-bootstrap';
import { usePagination, useTable } from 'react-table';

export const GenericTable = ({
  columns,
  data,
  useData,
  loading,
  pageCount: controlledPageCount,
  defaultPageSize
}) => {
  const [recordsPerPage, setRecordsPerPage] = useState(defaultPageSize);
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    state: {
      pageIndex,
      pageSize,
    },
  } = useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: 1,
        pageSize: recordsPerPage
      },
      manualPagination: true,
      pageCount: controlledPageCount,
    },
    usePagination
  )

  useEffect(() => {
    useData({ pageIndex, pageSize })
  }, [useData, pageIndex, pageSize])

  return (
    <Card border="light" className="table-wrapper table-responsive shadow-sm">
      <Card.Body className="pt-0">
        {loading ? (
          <Spinner animation="grow" />
        ) : (
          <Table
            hover
            className="user-table align-items-center"
            {...getTableProps()}
          >
            <thead>
              {
                headerGroups.map(headerGroup => (
                  <tr {...headerGroup.getHeaderGroupProps()}>
                    {
                      headerGroup.headers.map(column => (
                        <th
                          className="border-bottom"
                          {...column.getHeaderProps()}
                        >
                          {
                            column.render('Header')}
                        </th>
                      ))}
                  </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {
                page.map((row, i) => {
                  prepareRow(row)

                  return (
                    <tr {...row.getRowProps()}>
                      {
                        row.cells.map(cell => {
                          return (
                            <td {...cell.getCellProps()}>
                              {
                                cell.render('Cell')}
                            </td>
                          )
                        })}
                    </tr>
                  )
                })}
            </tbody>
          </Table>
        )}
        <Card.Footer
          className="px-3 border-0 d-lg-flex align-items-center justify-content-between">
          <Pagination className="mb-2 mb-lg-0">
            <Pagination.First
              disabled={pageIndex === 1}
              onClick={() => gotoPage(1)}
            />
            <Pagination.Prev
              disabled={!canPreviousPage}
              onClick={() => previousPage()}
            />
            <Pagination.Next
              disabled={!canNextPage}
              onClick={() => nextPage()}
            />
            <Pagination.Last
              disabled={pageIndex === pageCount}
              onClick={() => gotoPage(pageCount)}
            />
          </Pagination>
          <small className="fw-bold">
            Page{" "}
            <strong>{pageIndex}</strong> of {pageOptions.length}
          </small>
        </Card.Footer>
      </Card.Body>
    </Card>
  )
}

[phretor]

Solved like this:

import dayjs from "dayjs";
import React, { useMemo } from "react";
import { GenericTable } from "../components/Tables";
import { useReadHitsHitsGetQuery } from '../service/scannerApi';


export default function HitsList() {
  const defaultPageSize = 10;

    // const { first_seen, last_seen, total_data, avg_resp_size, ip, isp, org, country, city, vendor } = props;

  const columns = useMemo(() => [
    {
      Header: "First Seen",
      accessor: "first_seen",
      Cell: ({ cell: { value } }) => (dayjs(value).format())
    },
    {
      Header: "Last Seen",
      accessor: "last_seen",
      Cell: ({ cell: { value } }) => (dayjs(value).format())
    },
    {
      Header: "IP",
      accessor: "ip"
    },
    {
      Header: "ISP",
      accessor: "isp"
    },
    {
      Header: "Org",
      accessor: "country"
    },
    {
      Header: "City",
      accessor: "city"
    },
  ])

  return (
    <>
      <GenericTable
        columns={columns}
        useData={useReadHitsHitsGetQuery}
        defaultPageSize={defaultPageSize}
      />
    </>
  );
};

export const GenericTable = ({
  columns,
  useData,
  defaultPageSize
}) => {
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)
  const [total, setTotal] = useState(0)
  const [controlledPageCount, setPageCount] = useState(0)
  const [recordsPerPage, setRecordsPerPage] = useState(defaultPageSize)

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    state: {
      pageIndex,
      pageSize,
    },
  } = useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: 0,
        pageSize: recordsPerPage
      },
      manualPagination: true,
      pageCount: controlledPageCount,
    },
    usePagination
  )

  const {
    data: result,
    isFetching,
    isLoading
  } = useData({ page: pageIndex + 1, size: pageSize })

  useEffect(() => {
    setLoading(isLoading || isFetching)
    setData(!(isLoading || isFetching) ? result?.items : [])
    setTotal(!(isLoading || isFetching) && result?.total)
    setPageCount(!(isLoading || isFetching) &&
      result?.total ? Math.floor(result.total / pageSize) : 0)
  }, [result, pageIndex, pageSize])

  return (
    <Card border="light" className="table-wrapper table-responsive shadow-sm">
      <Card.Body className="pt-0">
        {loading ? (
          <Spinner animation="grow" />
        ) : (
          <Table
            hover
            className="user-table align-items-center"
            {...getTableProps()}
          >
            <thead>
              {
                headerGroups.map(headerGroup => (
                  <tr {...headerGroup.getHeaderGroupProps()}>
                    {
                      headerGroup.headers.map(column => (
                        <th
                          className="border-bottom"
                          {...column.getHeaderProps()}
                        >
                          {
                            column.render('Header')}
                        </th>
                      ))}
                  </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {
                page.map((row, i) => {
                  prepareRow(row)

                  return (
                    <tr {...row.getRowProps()}>
                      {
                        row.cells.map(cell => {
                          return (
                            <td {...cell.getCellProps()}>
                              {
                                cell.render('Cell')}
                            </td>
                          )
                        })}
                    </tr>
                  )
                })}
            </tbody>
          </Table>
        )}
        <Card.Footer
          className="px-3 border-0 d-lg-flex align-items-center justify-content-between">
          <Pagination className="mb-2 mb-lg-0">
            <Pagination.First
              disabled={pageIndex === 0}
              onClick={() => gotoPage(0)}
            />
            <Pagination.Prev
              disabled={!canPreviousPage}
              onClick={() => previousPage()}
            />
            <Pagination.Next
              disabled={!canNextPage}
              onClick={() => nextPage()}
            />
            <Pagination.Last
              disabled={pageIndex === pageCount}
              onClick={() => gotoPage(pageCount - 1)}
            />
          </Pagination>
          <small className="fw-bold">
            {total} records / page{" "}
            <strong>{pageIndex + 1}</strong> of {pageOptions.length}
          </small>
        </Card.Footer>
      </Card.Body>
    </Card>
  )
}