Skip to main content
More in Learn

Pagination in Search Results

The Search API allows paginating the results of your search by passing the “first” and “after” input arguments in your search queries. In the results you can also request for the page information, to keep track of the page’s last item and if there is another available next page.

Slicing

The first argument allows you to fetch only the amount of items you specify. Let's say you only want to grab the first three results, this is how you would do it:

Pagination

The Search API uses cursor-based pagination. A cursor can be defined as a pointer that is generally an encoded offset value 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:

The query above contains the following:

  • edges: contains a list of CatalogueConnectionEdge types.
  • node: the object containing the information about an item 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 Search 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