# Pagination

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 %}

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.suggestic.com/graphql/start-here/tutorials-and-walkthroughs/pagination.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.