More in Learn

Pagination

Your catalogue might contain a huge quantity of items. GraphQL allows you to limit and paginate your item lists.

In order to perform these operations, ensure that you have the proper authentication (if necessary) and user permissions.

Subtree

In Crystallize, you can use the subtree field to apply pagination to a list of items. We’ll first take a look at how you’d 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:

Circle loading spinnerImage of a partial circle indicating &qoute;loading&qoute;.Fetching snippet...

Sorting

The sort argument specifies the direction you would like to sort the items in. It takes one of two values, asc (ascending) or desc (descending). The following query uses the argument to sort the items as follows:

Circle loading spinnerImage of a partial circle indicating &qoute;loading&qoute;.Fetching snippet...

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:

Circle loading spinnerImage of a partial circle indicating &qoute;loading&qoute;.Fetching snippet...

In the query, the subtree is the connection. It contains the following:

  • edges: contains a list of SubtreeEdge types.
  • node: the object containing 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, use 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.

Circle loading spinnerImage of a partial circle indicating &qoute;loading&qoute;.Fetching snippet...
People showing thumbs up

Need further help?

Join and ask our
slack community.

Join our slack community