Using server side update react-table not working

[himat]

I have spent a lot of time trying to get this to work, and it's still not working exactly.

I'm trying to do server-side rendering with pagination of my data and I'm using graphql with apollo client in React on the frontend.

For some reason, the data rows do change to page 2 for a brief second when I click on the next page button in the UI, but then the table gets reset back to the first page instead of going to the second.

From looking at the browser network requests, it looks like the fetchMore/loadData function is getting called twice every time I press the next page button. And the first time, it calls it with the correct offset parameter to get the next page, and then when it's on the next page, the fetchMore/loadData gets called again! But this time, it uses the old offset variable.

I followed the given controlled rendering example from https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled
and then followed the apollo client pagination example for fetching data https://www.apollographql.com/docs/react/data/pagination/#offset-based

Table/index.js

import React, { useState } from "react";
import { useTable, useFilters, useSortBy, usePagination, useAsyncDebounce } from "react-table";

export default function Table({ 
    columns, 
    data, 
    loadData, 
    loading, 
    pageCount: controlledPageCount 
  }) {

  const [filterInputState, setFilterInputState] = useState({});

  // useTable hook sends columns and data to build the table
  const {
    getTableProps, getTableBodyProps, headerGroups, prepareRow, rows,
    setFilter, 
    pageOptions, pageCount, page, state: {pageIndex, pageSize}, gotoPage, previousPage, nextPage, setPageSize, canPreviousPage, canNextPage
  } = useTable({ columns, data, initialState: { pageIndex: 0 }, 
       manualPagination: true,
      pageCount: controlledPageCount,
      },
      useFilters, useSortBy, usePagination); 

      // Added debouncing from the faq https://github.com/tannerlinsley/react-table/blob/master/docs/faq.md, but it didn't change anything
  const onLoadDataDebounced = useAsyncDebounce(loadData, 100);

  // This function should get called anytime loadData, pageIndex, or pageSize change
  React.useEffect(() => {
    onLoadDataDebounced({ 
      variables: { 
          offset: (pageIndex+1)*pageSize,
          limit: 10,
      },
      updateQuery: (prev, { fetchMoreResult  }) => {
        if (!fetchMoreResult) { 
          return prev;
        } 

        // When I append the new results to the previous ones, the new rows appear in the first page and the pageSize grows longer! So it's making it an infinitely scrolling table, but I don't want infinite scrolling, I want a paginated table.
        //var newLoads = [...prev.loads, ...fetchMoreResult.loads];
        // So that's why I'm only keeping the new loads returned
        var newLoads = [...fetchMoreResult.loads];

        return Object.assign({}, prev, {
          loads: newLoads, 
          pageCount: 9
        });
      }

    });
        
      }, [onLoadDataDebounced, pageIndex, pageSize]);


  return (
    <>
      <pre>
        <code>
        {JSON.stringify({
          pageIndex, pageSize, pageCount, canNextPage, canPreviousPage
        }, null, 2)}
        </code>
      </pre>

      <div>
        <table {...getTableProps()} className="tableWrap">
          <EXCLUDED: everything in here is just like normal from https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled >
        </table>
      </div>
    </>
  );

Dashboard/index.js which is the outer file that imports the Table

import React, { useState, useEffect, useMemo } from 'react';
import { useQuery } from "@apollo/react-hooks"
import { Query } from "react-apollo";
import { gql } from 'apollo-boost';
import Table from "../Table";

const GET_LOADS=gql`
query ($offset: Int, $limit: Int, $originLocFilter: String) {
  loads (offset: $offset, limit: $limit ) 
  {
    id
    origin
    price
    weight
  }
}
`
function DashboardPage() {
  const columns = useMemo(
    () => [
      {
        Header: "Origin",
        accessor: "origin_loc"
      },
     // etc. etc. ...
    ],
    []
  );

   // Using graphql UseQuery which returns a fetchMore function
  const { loading, error, data, fetchMore } = useQuery(GET_LOADS, {variables: {offset: 0, limit: 10}});

  if (error) {
    console.error(error);
  }
  
  return (
    <div className="Dashboard">
      <h3> Table </h3>
      {error && <div>error</div>}
      {loading  && <div>Loading...</div>}
      {!loading && <Table columns={columns} 
                          data={data.loads}
                          loadData={fetchMore}
                          loading={loading}
                          pageCount={3} // hard coding it for now
                          /> }
    </div>

  );

}

@onenick972 @vsSanti Do you have any advice on how to fix this?

[himat]

Update: the problem is not specific to using graphql queries. I tried it with a rest api, and I'm getting the same problem where the loadData function gets called twice, and the table just resets back to the first page.

[fnn]

I think it could be because of mounting and unmounting the table based on the loading value:

{!loading && (
  <Table columns={columns} 
    data={data.loads}
    loadData={fetchMore}
    loading={loading}
    pageCount={3} // hard coding it for now
  />
) }

You load the next page, the table will unmount, the request for page 2 is done, the tables gets mounted and requests the data for page 1.

[himat]

Fixed by disabling all table changes like in the FAQ

[justin-tufte]

im having this same issue where on sort my fetchData function gets called twice, it looks like the first time is due to the sortBy value updating, the second time it looks like its due to the pageIndex value changing, even setting tableOptions.autoResetPage = false; i can see pageIndex getting reset and causing the second fetch data call. Im using manualPagination and manualSorting.