Pagination

• On this page
• Pagination

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-pagination and https://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:

1
query {
2
 users(first: 2, after:"OGRiNDY2YzAtYTA0MS00OTM0LWFmMzUtMTU4YzcwNGM1OWRl") {
3
  edges {
4
   node {
5
    id
6
    name
7
    externalUserId
8
   }
9
   cursor
10
  }
11
  pageInfo {
12
   hasPreviousPage
13
   hasNextPage
14
   startCursor
15
   endCursor
16
  }
17
 }
18
}

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:

1
{
2
 "data": {
3
  "users": {
4
   "edges": [
5
    {
6
     "node": {
7
      "id": "d9b7302f-xxx-xxx-xxx-b403242e3f26",
8
      "name": "Danton Black",
9
      "externalUserId": "96fxxxx85cd7"
10
     },
11
     "cursor": "ZDliNzMwMmYtxxxxxxxxxxxZmUtYjQwMzI0MmUzZjI2"
12
    },
13
    {
14
     "node": {
15
      "id": "8db466c0-xxx-xxx-xxx-158c704c59de",
16
      "name": "Miguel Rangel",
17
      "externalUserId": "96b9327xxxxxxx-xxx86ce-b79e66872daa"
18
     },
19
     "cursor": "OGRiNDY2YxxxxxxxxLWFmMzUtMTU4YzcwNGM1OWRl"
20
    }
21
   ],
22
   "pageInfo": {
23
    "hasPreviousPage": true,
24
    "hasNextPage": true,
25
    "startCursor": "ZDliNzxxxxxxxxxxxxxxxxxxxUtYjQwMzI0MmUzZjI2",
26
    "endCursor": "OGRiNDY2YzAxxxxxxxxxxxxxMTU4YzcwNGM1OWRl"
27
   }
28
  }
29
 }
30
}