Tray Embedded / Embedded APIs / Intro to the APIs / Pagination

Pagination

  • On this page

The Tray Embedded APIs use standard conventions for pagination, compatible with the

Relay Pagination Container specification. Note that in our demo app all mutations make use of **clientMutationId** - if this parameter is specified in the input to the mutation, it will be returned unchanged in the payload. It is not necessary to use **clientMutationId** but it is used in Relay and Apollo.

Two very helpful articles on pagination with GraphQL can be found at

https://www.howtographql.com/react-relay/8-paginationandhttps://blog.apollographql.com/tutorial-pagination-d1c3b3ee2823

When using a query such as users it is possible to specify the cursor and page information that you need for pagination of results:

query {
users(first: 2, after:"OGRiNDY2YzAtYTA0MS00OTM0LWFmMzUtMTU4YzcwNGM1OWRl") {
edges {
node {
id
name
externalUserId
}
cursor
}
pageInfo {
hasPreviousPage
hasNextPage
startCursor
endCursor
}
}
}

pageInfo is what GraphQL calls a connection. A connection stores additional data about the context of each item (edge/node), i.e. about the position of the item in the list as well as the items in the list that come directly before and after it.

Note that after in the above query specifies a particular cursor to begin the list from.

From the results you can see that the necessary page and cursor information is returned, as needed for pagination of results:

{
"data": {
"users": {
"edges": [
{
"node": {
"id": "d9b7302f-xxx-xxx-xxx-b403242e3f26",
"name": "Danton Black",
"externalUserId": "96fxxxx85cd7"
},
"cursor": "ZDliNzMwMmYtxxxxxxxxxxxZmUtYjQwMzI0MmUzZjI2"
},
{
"node": {
"id": "8db466c0-xxx-xxx-xxx-158c704c59de",
"name": "Miguel Rangel",
"externalUserId": "96b9327xxxxxxx-xxx86ce-b79e66872daa"
},
"cursor": "OGRiNDY2YxxxxxxxxLWFmMzUtMTU4YzcwNGM1OWRl"
}
],
"pageInfo": {
"hasPreviousPage": true,
"hasNextPage": true,
"startCursor": "ZDliNzxxxxxxxxxxxxxxxxxxxUtYjQwMzI0MmUzZjI2",
"endCursor": "OGRiNDY2YzAxxxxxxxxxxxxxMTU4YzcwNGM1OWRl"
}
}
}
}