Material-ui: Function onChangePage on component TablePagination doesn't work with graphql function.

[MontoyaAndres]

Hello.

I'm building a table and the component to change the page is the component TablePagination. When I use the function onChangePage to call a react-apollo function, this method doesn't execute that function.

<TablePagination
  component="div"
  count={data.StudentByParams.count} // data from graphql api (this is any number)
  rowsPerPage={rowsPerPage}
  page={page}
  backIconButtonProps={{
    'aria-label': 'Previous Page'
  }}
  nextIconButtonProps={{
    'aria-label': 'Next Page'
  }}
  onChangePage={this.handleChangePage}
  onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>

So, when I change the method onChangePage to this:

<TablePagination
  component="div"
  count={data.StudentByParams.count} // data from graphql api (this is any number)
  rowsPerPage={rowsPerPage}
  page={page}
  backIconButtonProps={{
    'aria-label': 'Previous Page'
  }}
  nextIconButtonProps={{
    'aria-label': 'Next Page'
  }}
  onChangePage={() => {
    this.setState({ page });
    fetchMore({
      variables: {student: "something"},
      updateQuery: (previousResult, { fetchMoreResult }) => {
        if (!fetchMoreResult) {
          return previousResult;
        }

        return { ...previousResult, StudentByParams: [...previousResult.StudentByParams, ...fetchMoreResult.StudentByParams] };
        }
    })
  }}
  onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>

How can I execute fetchMore on onChangePage?

[MontoyaAndres]

The docs of https://material-ui.com/api/table-pagination/#tablepagination about the function onChangePage is very poor, I needed to read the code https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/TablePagination/TablePagination.js

[bulourian]

@MontoyaAndres Hi, I have the same issue.

Could you please tell me how you achieve that? and how can i use that?
I don't want to load all data from Database into { data: [] } , This situation needs more Memory and it's grow up and I think It's totally slow down performance.

Sorry for opening this issue, but i really stuck at it :(

[MontoyaAndres]

@bulourian hi, the prop onChangePage pass 2 params the event and the current page, for example:

onChangePage={(e, pg) => console.log(`current page -> ${pg})}

Here a example:

https://github.com/MontoyaAndres/GradeProject/blob/master/client/src/components/CareerDesktop/index.jsx#L323

[bulourian]

@MontoyaAndres Thank you for answering my question.

My problem is, when "data" Array is filled with static data, pagination works fine, But. if I want to load data from server or Database into DataTable, Table and Pagination is totally broken :(

I've made a simple example, would you mind look it that, and tell me where am I wrong?
CodeSandbox

Thank you again man :+1:

[MontoyaAndres]

@bulourian Your example doesn't work how you want, check this example with Mongodb:

https://github.com/MontoyaAndres/GradeProject/blob/master/server/src/resolvers/student.js#L8

[bulourian]

Finally!

Actually I know somehow do the same thing in below code. But, This line take time for me 48 hours!
Why am I don't do this in the first? :/
rows: [...prev.rows, ...data.items],

And believe me, this piece of Code is really Important in this case!
you have to put this in handleChangePage()
if (this.state.totalSize !== this.state.rows.length) { this.fetchData(page, this.state.rowsPerPage); }

Check example again and see that works.
Thanks @MontoyaAndres, I really mean it, Without your help, I can't fix this ;)

[CARDILAC]

put this on slice()
records.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(....