> For the complete documentation index, see [llms.txt](https://docs.suggestic.com/graphql/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.suggestic.com/graphql/start-here/tutorials-and-walkthroughs/pagination.md).

# Pagination

Using pagination and slicing to work with search queries

Use **Pagination** to query a list of data in discrete parts**.** Also, use the cursor-based pagination to select which set of results to retrieve from a connection.

Implementing pagination in data-heavy queries helps to:

* Optimize the application performance 
* Reduce the load time the application is rendering the results in the UI.

Use **Slicing** to fetch exactly the number of results from the data.

Learn more about Cursors here: <https://relay.dev/graphql/connections.htm>

## Pagination

Within pagination, connections retrieve a list of *nodes*. A node is an object that has a global ID. Nodes are said to be connected by *edges*.

* **`node`:** Used to select the fields that you want to retrieve from the node at each edge.
* **`edges`:** Used to select the fields that you want to retrieve from each edge in the connection. The `edges` field is similar to a for-loop because it retrieves the selected fields from each edge in the connection.

{% tabs %}
{% tab title="Example" %}

```graphql
query {
 edges 
  {
    node
     {
      name
     }
  }
}
```

{% endtab %}
{% endtabs %}

The following example retrieves the list of restaurants:

{% tabs %}
{% tab title="Query" %}

```graphql
{
  restaurantSearch(
    query:"Mexican Restaurant") 
  {
    edges
    {
     node
      {
        name
       }   
    }
 }
}
```

{% endtab %}

{% tab title="Response" %}

```graphql
{
  "data": {
    "restaurantSearch": {
      "edges": [
        {
          "node": {
            "name": "The Islander Restaurant"
          }
        },
        {
          "node": {
            "name": "Hua Ting Restaurant"
          }
        },
        {
          "node": {
            "name": "Tom's Restaurant"
       }
      ]
    }
  }
}
```

{% endtab %}
{% endtabs %}

### Cursor-based Pagination

A cursor is a unique string that identifies a particular row.  You can include the following fields in your queries to paginate your results:

* `pageInfo:`Each connection can return a `PageInfo` object which contains general information about the particular page returned. This object includes:
  * `hasNextPage:` displays whether there are results in the connection after the current segment.
  * `hasPreviousPage` displays whether there are results in the connection before the current segment.
  * `startCursor` and `endCursor:` return non-null opaque strings. Both must be the cursors corresponding to the first and last nodes in `edges`, respectively.
  * `endCursor`
* `cursor:` A marker for an edge's position in the connection.

### Forward pagination arguments

To enable forward pagination arguments, use the following fields:

* `first:`it takes a non-negative integer.
* `after:` It takes the *cursor type* and retrieves results after that position.

{% hint style="info" %}
&#x20;Pass the `cursor` of the last edge on the previous page for `after`.
{% endhint %}

### Backward pagination arguments

* `last:`it takes a non-negative integer.
* `before:` It takes the *cursor type* and retrieves the results before that position.

{% hint style="info" %}
&#x20;Pass the `cursor` of the first edge on the next page for `before`.
{% endhint %}

### Examples&#x20;

**Fetching results using Cursor based pagination**

In the following example, use `pageInfo` and `cursor` fields in the queries to paginate the results.

{% tabs %}
{% tab title="Query" %}

```graphql
{
  restaurantSearch(
    query:"Mexican Restaurant"
    distance: 100
    meals: "meat"
    isOpen:true
    first:3
) 
  {
edges
    {
      node{
        name
        cityTown
        country
        recommendation
      }  
       cursor
    }
    pageInfo{
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
}
}
```

{% endtab %}

{% tab title="Response" %}

```graphql
{
  "data": {
    "restaurantSearch": {
      "edges": [
        {
          "node": {
            "name": "The Islander Restaurant",
            "cityTown": "Mercer Island",
            "country": "US",
            "recommendation": "Prime Rib"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjA="
        },
        {
          "node": {
            "name": "Hua Ting Restaurant",
            "cityTown": "Hinsdale",
            "country": "US",
            "recommendation": "Young Chow Noodles"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjE="
        },
        {
          "node": {
            "name": "Tom's Restaurant",
            "cityTown": "Rochester",
            "country": "US",
            "recommendation": "Fried Combo Seafood"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjI="
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": false,
        "startCursor": "YXJyYXljb25uZWN0aW9uOjA=",
        "endCursor": "YXJyYXljb25uZWN0aW9uOjI="
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

The result retrieves three results from the beginning of the connection, and they include a cursor for each edge. In addition, we asked for `hasNextPage`; that will tell us if there are more edges available, or if we’ve reached the end of this connection.

**Fetching results using `after` parameter**

In the following example, use after argument to pass the information of a specific cursor, so results display the information after that cursor. For instance, define the `after` parameter with the `YXJyYXljb25uZWN0aW9uOjI=` value, which corresponds to the `"name": "Tom's Restaurant"` last result retrieved in the previous example:

{% tabs %}
{% tab title="Query" %}

```graphql
{
  restaurantSearch(
    query:"Mexican Restaurant"
    distance: 100
    meals: "meat"
    isOpen:true
    first:3
    after: "YXJyYXljb25uZWN0aW9uOjI="
) 
  {
edges
    {
      node{
        name
        cityTown
        country
        recommendation
      }  
       cursor
    }
    pageInfo{
      hasNextPage
      hasPreviousPage
      startCursor
   
    }
}
}
```

{% endtab %}

{% tab title="Response" %}

```graphql
{
  "data": {
    "restaurantSearch": {
      "edges": [
        {
          "node": {
            "name": "Queen's Pizza & Restaurant",
            "cityTown": "Clearwater",
            "country": "US",
            "recommendation": "Vegetarian Delight Pizza"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjM="
        },
        {
          "node": {
            "name": "Coco Palm Restaurant",
            "cityTown": "Pomona",
            "country": "US",
            "recommendation": "Ropa Vieja"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjQ="
        },
        {
          "node": {
            "name": "Snook's Bayside Restaurant & Grand Tiki bar",
            "cityTown": "Key Largo",
            "country": "US",
            "recommendation": "Conch Steak"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjU="
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": false,
        "startCursor": "YXJyYXljb25uZWN0aW9uOjM=",
  
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

The results retrieve the next three restaurants listed immediately after the `"Tom's Restaurant"` which has been retrieved in a previous example.

{% tabs %}
{% tab title="Query" %}

```graphql
{
  recipeSearch(
    meals: ["Breakfast"],
    query: "coconut",
    first: 3,
    after: "YXJyYXljb25uZWN0aW9uOjEw"
  ) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}
```

{% endtab %}

{% tab title="Response" %}

```javascript
{
  "data": {
    "recipeSearch": {
      "edges": [
        {
          "node": {
            "id": "UmVjaXBlOjg5ZmU4Y2JhLWNlNmUtNDM5Zi04NDEzLThkZDI2NmNmZDkyZg==",
            "name": "Coconut Cupcakes"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjEx"
        },
        {
          "node": {
            "id": "UmVjaXBlOjk5YzBhYThmLTNhOWYtNGY5Mi1hZWQzLWUyZDI0ZDhhOGY2YQ==",
            "name": "Coconut Cupcakes"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjEy"
        },
        {
          "node": {
            "id": "UmVjaXBlOjEyYjQ4MGE0LThjZmYtNDJkNy1hYjQ4LTU4Mjc4NmZmZTA3MQ==",
            "name": "Coconut Cookies"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjEz"
        }
      ],
      "pageInfo": {
        "endCursor": "YXJyYXljb25uZWN0aW9uOjEz",
        "hasNextPage": true
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

We can continue the pagination using the `endCursor`&#x20;

{% tabs %}
{% tab title="Query" %}

```graphql
{
  restaurantSearch(
    query:"Mexican Restaurant"
    distance: 100
    meals: "meat"
    isOpen:true
    first:3
    after: "YXJyYXljb25uZWN0aW9uOjI="
) 
  {
edges
    {
      node{
        name
        cityTown
        country
        recommendation
      }  
       cursor
    }
    pageInfo{
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
}
}
```

{% endtab %}

{% tab title="Result" %}

```graphql
{
  "data": {
    "restaurantSearch": {
      "edges": [
        {
          "node": {
            "name": "Queen's Pizza & Restaurant",
            "cityTown": "Clearwater",
            "country": "US",
            "recommendation": "Vegetarian Delight Pizza"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjM="
        },
        {
          "node": {
            "name": "Coco Palm Restaurant",
            "cityTown": "Pomona",
            "country": "US",
            "recommendation": "Ropa Vieja"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjQ="
        },
        {
          "node": {
            "name": "Snook's Bayside Restaurant & Grand Tiki bar",
            "cityTown": "Key Largo",
            "country": "US",
            "recommendation": "Conch Steak"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjU="
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": false,
        "startCursor": "YXJyYXljb25uZWN0aW9uOjM=",
        "endCursor": "YXJyYXljb25uZWN0aW9uOjU="
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

**Fetching results using `first` parameter**

The following example uses the first and after aruments  to modify the edges returned by the connection, returning edges after the `after` cursor, and returning the 3 `first` edges.

{% tabs %}
{% tab title="Query" %}

```graphql
{
  restaurantSearch(
    query:"Mexican Restaurant"
    first:3
    after: "YXJyYXljb25uZWN0aW9uOjI="
) 
  {
edges
    {
      node{
        name
        cityTown
        country
      }  
       cursor
    }
    pageInfo{
      hasNextPage
      hasPreviousPage
    }
}
}
```

{% endtab %}

{% tab title="Result" %}

```go
{
  "data": {
    "restaurantSearch": {
      "edges": [
        {
          "node": {
            "name": "Queen's Pizza & Restaurant",
            "cityTown": "Clearwater",
            "country": "US"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjM="
        },
        {
          "node": {
            "name": "Coco Palm Restaurant",
            "cityTown": "Pomona",
            "country": "US"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjQ="
        },
        {
          "node": {
            "name": "Snook's Bayside Restaurant & Grand Tiki bar",
            "cityTown": "Key Largo",
            "country": "US"
          },
          "cursor": "YXJyYXljb25uZWN0aW9uOjU="
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": false
      }
    }
  }
}
```

{% endtab %}
{% endtabs %}

## Slicing

In the following example, we retrieve the `first` 10 results from a recipe search containing the meal\_tag *Breakfast* and including the term *coconut.*

{% tabs %}
{% tab title="Query" %}

```graphql
{
  restaurantSearch(
    query:"Mexican Restaurant"
    meals: "meat"
    isOpen:true
    first:10
) 
  {
edges
    {
      node{
        name
        cityTown
        country
        recommendation
      }  
    }
}
}
```

{% endtab %}

{% tab title="Response" %}

```javascript
{
  "data": {
    "restaurantSearch": {
      "edges": [
        {
          "node": {
            "name": "The Islander Restaurant",
            "cityTown": "Mercer Island",
            "country": "US",
            "recommendation": "Prime Rib"
          }
        },
        {
          "node": {
            "name": "Hua Ting Restaurant",
            "cityTown": "Hinsdale",
            "country": "US",
            "recommendation": "Young Chow Noodles"
          }
        },
        {
          "node": {
            "name": "Tom's Restaurant",
            "cityTown": "Rochester",
            "country": "US",
            "recommendation": "Fried Combo Seafood"
          }
        },
        {
          "node": {
            "name": "Queen's Pizza & Restaurant",
            "cityTown": "Clearwater",
            "country": "US",
            "recommendation": "Vegetarian Delight Pizza"
          }
        },
        {
          "node": {
            "name": "Coco Palm Restaurant",
            "cityTown": "Pomona",
            "country": "US",
            "recommendation": "Ropa Vieja"
          }
        },
        {
          "node": {
            "name": "Snook's Bayside Restaurant & Grand Tiki bar",
            "cityTown": "Key Largo",
            "country": "US",
            "recommendation": "Conch Steak"
          }
        },
        {
          "node": {
            "name": "Topclass Jamaican Restaurant",
            "cityTown": "Orlando",
            "country": "US",
            "recommendation": "Curry Chicken"
          }
        },
        {
          "node": {
            "name": "Lulu's Restaurant",
            "cityTown": "Van Nuys",
            "country": "US",
            "recommendation": "Greek Salad"
          }
        },
        {
          "node": {
            "name": "Romas Pizzeria & Restaurant",
            "cityTown": "Southgate",
            "country": "US",
            "recommendation": "Ravioli (Meat or Cheese)"
          }
        },
        {
          "node": {
            "name": "Subway Restaurants",
            "cityTown": "Overland Park",
            "country": "US",
            "recommendation": null
          }
        }
      ]
    }
  }
}
```

{% endtab %}
{% endtabs %}

###