Your tenant might have a huge quantity of items. Maybe in some cases, you do not want to fetch all the items. GraphQL gives you the ability to add pagination to the list of items.
In Crystallize, you can use the subtree field to apply pagination to a list of items. We will first take a look at how you would use this field to limit the amount of items returned and then move on to cursor-based pagination.
This argument allows you to fetch only the amount of items you specify. Let's say you only want to grab the first three plants from the plants folder, this is how you would do it:
The sort argument specifies the direction you would like to sort the items in. It takes in two values - asc or desc. The following query uses the argument to sort the items as follows:
A cursor can be defined as a pointer that is generally an ID representing a specific location in a list. GraphQL uses the concept of connections for this purpose.
Connection in GraphQL acts as a wrapper for the list of results you are paginating. Any connection consists of two fields - edges and pageInfo. Take a look at the following query:
In the query, the subtree is the connection. It contains the following:
- edges: contains a list of SubtreeEdge types.
- node: the object containing the information about an object which would be an item in this case.
- cursor: a string specifying the location of an item in the list.
- pageInfo: this contains fields such as hasNextPage, hasPreviousPage, endCursor, startCursor, and totalNodes.
To apply pagination to the results returned by the Catalogue API, you will be using the after input argument which is the cursor. The following query fetches three items from the plants folder, starting from the cursor value provided to it.