Pagination on GraphQL Queries (with Hasura)

How do I do X?
1

Adding pagination on the table widget to GraphQL APIs is quite similar to how we do it with other DB queries.

First, we define two variables one to limit the number of rows on the table for a page, and the other to offset data (An offset is simply the number of records you wish to skip before selecting records).

Following is a code snippet explaining how you can configure offset and limit on a GraphQL endpoint based on properties from table widget on Appsmith:

{
	query: '
		query MyQuery($limit: Int, $offset: Int) {
			posts(limit: $limit, offset: $offset) {
				id
				title
				post
			}
			posts_aggregate {
				aggregate {
					count
				}
			}
		}
	',
	variables: {
		"limit": {{Table1.pageSize}},
		"offset": {{(Table1.pageNo - 1) * Table1.pageSize}}
	}
}

limit is basically the number of rows that are present on a single page on Table1 (Table1.pageSize), this can be increased or decreased by configuring the table height. Offset is the total number of items to skip before selecting the record, it’s calculated using (Table1.pageNo - 1) * Table1.pageSize.

View the Forkable Template for Pagination

The following question is also discussed on How Do I Do X on Appsmith Session on our community call. Watch it here: How Do I Do X? - YouTube