Paginate Your Results
GraphQL queries can return up to 2000 records. By default, the wire adapter returns the first 10 results and you can request subsequent pages using the cursor information. The GraphQL API and graphql wire adapter use the GraphQL Cursor Connections Specification to allow pagination of all data collections they return.
To specify the number of records to return, use the
first argument. The default number is 10. If
hasNextPage is true, you can provide the
endCursor value to the
after argument of a subsequent query, which requests the next page of results.
Backward pagination using
before isn't currently supported.
Here's a basic query with cursor information.
This example response contains cursor information.
totalCount can have performance implications for large or complex queries.
Let's take a look at how we can create a
simplePagination component with a reset button that resets the pagination and a next page button that pages through the results. The component displays 5 results on each page by default. It uses a
isLastPage property to determine if the next page button is disabled.
The component uses the
lightning-button base component to display the reset button and next page button. It displays the account name and annual revenue in the
lightning-card base component.
When clicked, the next page button sets the
lastCursor value to the
endCursor value and displays the next set of results.