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 for pagination of all data collections they return.

Query with Cursor Information

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 last and before isn’t currently supported.

Note

Here’s a basic query with cursor information.

1query AccountRecords {
2  uiapi {
3    query {
4      Account (first: 5, after: "endCursorFromPreviousQuery") {
5        edges {
6          node {
7            Id
8            Name {
9              value
10            }
11          }
12        }
13        totalCount
14        pageInfo {
15          endCursor
16          hasNextPage
17        }
18      }
19    }
20  }
21}

This example response contains cursor information.

1{
2  "data": {
3    "uiapi": {
4      "query": {
5        "Account": {
6          "edges": [
7            {
8              "node": {
9                "Id": "001RM000005ZclBYAS",
10                "Name": {
11                  "value": "GenePoint"
12                }
13              }
14            },
15            {
16              "node": {
17                "Id": "001RM000005Zcl6YAC",
18                "Name": {
19                  "value": "United Oil"
20                }
21              }
22            }
23          ], // 3 more node objects here removed for brevity
24          "totalCount": 5,
25          "pageInfo": {
26            "endCursor": "djE6Nw==",
27            "hasNextPage": true
28          }
29        }
30      }
31    }
32  },
33  "errors": []
34}

Requesting totalCount can have performance implications for large or complex queries.

Tip

Implement Pagination in LWC

In this example, we create a simplePagination component with a reset button and a next page button. The reset button resets the pagination. The next page button pages through the results. The component displays 5 results on each page by default. It uses an isLastPage property to determine if the next page button is disabled.

The graphqlPagination component in the lwc-recipes repo gets contact data with pagination to navigate through the list.

Tip

1// simplePagination.js
2import { LightningElement, wire } from "lwc";
3import { gql, graphql } from "lightning/graphql";
4
5const pageSize = 3;
6
7export default class GraphqlPagination extends LightningElement {
8  after;
9  pageNumber = 1;
10
11  @wire(graphql, {
12    query: gql`
13      query paginatedContacts($after: String, $pageSize: Int!) {
14        uiapi {
15          query {
16            Contact(first: $pageSize, after: $after, orderBy: { Name: { order: ASC } }) {
17              edges {
18                node {
19                  Id
20                  Name {
21                    value
22                  }
23                }
24              }
25              pageInfo {
26                endCursor
27                hasNextPage
28                hasPreviousPage
29              }
30            }
31          }
32        }
33      }
34    `,
35    variables: "$variables",
36  })
37  contacts;
38
39  get variables() {
40    return {
41      after: this.after || null,
42      pageSize,
43    };
44  }
45
46  get isFirstPage() {
47    return !this.contacts.data?.uiapi.query.Contact.pageInfo.hasPreviousPage;
48  }
49
50  get isLastPage() {
51    return !this.contacts.data?.uiapi.query.Contact.pageInfo.hasNextPage;
52  }
53
54  handleNext() {
55    if (this.contacts.data?.uiapi.query.Contact.pageInfo.hasNextPage) {
56      this.after = this.contacts.data.uiapi.query.Contact.pageInfo.endCursor;
57      this.pageNumber++;
58    }
59  }
60
61  handleReset() {
62    this.after = null;
63    this.pageNumber = 1;
64  }
65}

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.

1<!-- simplePagination.html -->
2<template>
3  <lightning-card title="GraphqlPagination" icon-name="custom:custom39">
4    <div class="slds-var-m-around_medium">
5      <template lwc:if={contacts.data}>
6        <template for:each={contacts.data.uiapi.query.Contact.edges} for:item="contact">
7          <p key={contact.node.Id}>{contact.node.Name.value}</p>
8        </template>
9        <div class="slds-grid slds-grid_vertical-align-center slds-var-m-horizontal_x-small">
10          <div class="slds-col slds-size_1-of-2">
11            <lightning-button-icon
12              disabled={isFirstPage}
13              class="reset"
14              icon-name="utility:skip_back"
15              onclick={handleReset}
16              ><label>Restart</label></lightning-button-icon
17            >
18          </div>
19          <div class="slds-col slds-size_1-of-2">
20            <lightning-button-icon
21              disabled={isLastPage}
22              class="next"
23              icon-name="utility:chevronright"
24              onclick={handleNext}
25              ><label>Next</label></lightning-button-icon
26            >
27          </div>
28        </div>
29      </template>
30      <template lwc:elseif={contacts.errors}>
31        <c-error-panel errors={contacts.errors}></c-error-panel>
32      </template>
33    </div>
34
35    <c-view-source source="lwc/graphqlPagination" slot="footer">
36      Run a GraphQL query that uses pagination using @wire.
37    </c-view-source>
38  </lightning-card>
39</template>

When clicked, the next page button sets the lastCursor value to the endCursor value and displays the next set of results.

Paginate Your Results

Query with Cursor Information

Implement Pagination in LWC

See Also