-
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 I followed the given controlled rendering example from https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled
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>
</>
);
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? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Fixed by disabling all table changes like in the FAQ |
Beta Was this translation helpful? Give feedback.
Fixed by disabling all table changes like in the FAQ