Cursor-based Table Pagination does not load the next page

Queries and Resources
1

Hi,

I have the following setup with a keysTable Table control. The next_cursor data loads and is encoded corrrectly (server-side accepts it and returns correct data).

image
image1387×1101 102 KB

The issue is the pagination buttons don't work--the page # changes on the UI, but the same row is displayed when I click on the > button, unless I manually click refresh. That will load the next cursor from the API.

The API response format is:

{
    "Results": [
        {
            "Id": 1,
            "PersonId": 123,
            "FirstName": "Francis",
            "Email": "francis@yo.com",
            "Role": "admin",
            "Comment": "blabla"
        }
    ],
    "Pagination": {
        "prev_cursor": "blabla1%3d",
        "next_cursor": "blabla2%3d%3d"
    },
    "ResponseStatus": {
        "ErrorCode": "200"
    }
}

I also tried with the "cursor-based" option, but I get a similar result.

What am I missing?

2

I'm having a similar issue with Cursor Based pagination, when I go to page 2, the afterCursor and query data are correct, but table shows there is no rows, then, when I go back to page 1, I can see the rows from page 2 appended after rows of page 1.

To me this seems like the pagination has some bugs, since the data an cursors are correct.

3

^ Disregard, I just learned that table.pageSize has a predefined value which changes depending on the table's height, so if you use a limited number of rows for each page and this number is lower that table.pageSize you'll fall into the same trap.

The solution for me was to set my limit parameter same as table.pageSize

4

That didn't solve it for me. The next page is not loaded even if I set limit=table.pageSize.

If next_cursor is null, then the table behaves as expected (greyed out <> buttons).

If next_cursor != null, the arrow button becomes enabled but clicking on it results in nothing. No query is sent to the API endpoint. I must click on the refresh button ot force it to load.

The query has cursor={{ decodeURIComponent(keysTable.nextAfterCursor) }}. Should I be getting the next_cursor from somewhere else ?

5

In case it helps someone, here is how ReTool support helped me solve it:

  1. The Query needs to user table.afterCursor (not nextAfterCursor which causes a recursion error)
  2. The table needed to use "Cursor-based" pagination, not GraphQL
  3. If you do use GraphQL in your setup, make sure the table "more data to load" code must output a boolean (I was missing a .length > 0 condition). No error is thrown if that returns NULL but it will prevent pagination from working.
  4. The Query needs to have "Update Automatically when input changes". Setting that to manual update will not work with pagination.