React-Table with Apollo-Client - server side pagination

[pszafer]

Hi,
I have react-table working with apollo-client when react-table is fetching all the data via GraphQL endpoint and it's working great.
Now I'm trying to implement server side pagination based on cursors + totalCount.
And react-table is going into infinite loop trying to load data.

export const ALL_DATA_QUERY = gql`
  query allData($first: Int, $cursor: String) {
    allData(sort: data1, first: $first, after: $cursor) {
      pageInfo {
        startCursor
        endCursor
        hasNextPage
        hasPreviousPage
      }
      totalCount
      edges {
        node {
          data1
        }
      }
    }
  }
`;


export default function OrderList() {
  const { loading, error, orderData, fetchMore, networkStatus } = useQuery(ALL_ORDERS_QUERY, {
    notifyOnNetworkStatusChange: true,
    variables: allOrdersQueryVars,
  });
  const [data, setData] = useState([]);
  const [pageCount, setPageCount] = React.useState(1)

  const dataFetch = (nextCursor) => {
    fetchMore({
      query: ALL_DATA_QUERY,
      notifyOnNetworkStatusChange: true,
      variables: {
        first: 10,
        // cursor: data.allOrders.pageInfo.endCursor,
      },
      updateQuery: (previousResult, { fetchMoreResult }) => {
        const newEdges = fetchMoreResult.allOrders.edges;
        return fetchMoreResult
      },
    }).then(response => {
      console.log("fetched!")
      // console.log(response)
      setData(response.data.allOrders.edges)
      setPageCount(1)
    })
  };

  const columns = React.useMemo(
    () => [
      {
        Header: 'Everything',
        columns: [
          {
            Header: 'First Name',
            accessor: 'data1',
          }
        ],
      },
    ],
    []
  )
  return (
      <DataTable
        columns={columns}
        data={data}
        fetchData={dataFetch}
        pageCount={1}
     />

and Datatable:

function OrderTable({
    columns,
    data,
    fetchData,
    loading,
    pageCount: controlledPageCount,
  }) {
    const {
      getTableProps, getTableBodyProps, headerGroups, prepareRow,
      page, canPreviousPage,canNextPage, pageOptions, pageCount, gotoPage, nextPage,
      previousPage, setPageSize,
      state: { pageIndex, pageSize },
    } = useTable(
      {
        columns,
        data,
        initialState: { pageIndex: 0 }, // Pass our hoisted table state
        manualPagination: true, // Tell the usePagination
        pageCount: controlledPageCount,
      },
      usePagination
    )
  
    React.useEffect(() => {
      fetchData()
    }, [fetchData, pageIndex, pageSize])
  
    // Render the UI for your table
    return (
      <>
        <table {...getTableProps()}>
          ...
      </>
    )
  }

it's going into infinite loop in:

React.useEffect(() => {
      fetchData()
    }, [fetchData, pageIndex, pageSize])

I tried to use useAsyncDebounce, but I think I'm missing some state which informs react-table that data is already fetched...

[pszafer]

I ended up using lazy query.

const [loadData, { called, loading, data }] = useLazyQuery(ALL_DATA_QUERY, {
    notifyOnNetworkStatusChange: true
  });
const columns = React.useMemo(
    () => [
      {
        Header: 'orders',
        columns: [
          {
            Header: 'ID',
            accessor: 'mainorder',
            canSort: true
          }
        ],
      }
    ],
    []
  )
  const fetchIdRef = React.useRef(0)

  const fetchData = React.useCallback(({ pageSize, pageIndex, sortBy }) => {
    const fetchId = ++fetchIdRef.current
    if (fetchId === fetchIdRef.current) {
      const startRow = pageSize * pageIndex
      const stringCursor = "arrayconnection:" + (startRow-1)
      const cursor = startRow == 0 ? '' : btoa(stringCursor)
      const sort = sortBy.length == 0 ? "-mainorder" : 
        (sortBy[0].desc ? "-" : "")+sortBy[0].id
      loadData({
        variables: {
          first: pageSize,
          cursor: cursor,
          sort: sort
        }
      })
    }
  }, [])
  const pageCount = data ? Math.ceil(data.allData.totalCount / data.allData.edges.length) : 0
  const allData = data ? data.allData.edges.map(({ node }) => node) : []
  return (
     <div>
      <OrderTable
        columns={columns}
        data={allData}
        fetchData={fetchData}
        loading={loading}
        pageCount={pageCount}
      />
    </div>
  )

[moiz-frost]

@pszafer are you implementing sorting when the user clicks on any particular column?

[pszafer]

yes