Skip to main content
More in Learn

Pagination

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.

Subtree

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.

Slicing

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:

Sorting

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:

Pagination

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.

GraphQL Connections

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.

Using Pagination

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.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community