# Types / Cursor

# Cursor

**Scalar**
## Cursor

<p>
    Cursors are used to deal with multiple pages of results in GraphQL. We would highly suggest reading the 
    [GraphQL learning information on pagination](https://graphql.org/learn/pagination/).
</p>
<p>
    In short, pagination using Shopfront's GraphQL API is performed not as pages (like a typical REST API) but by
    asking to retrieve the value after the last value retrieved. The easiest way to do this is to request the 
    `[PageInfo](/documentation/Objects/Utils#PageInfo)` object on any `Connection`.
    The `PageInfo` object contains the fields `hasNextPage` and `endCursor` that can
    be used to determine whether an additional page is required and what the last cursor on the page is. You can then
    pass the `endCursor` to the `after` argument on a `Connection`.
</p>

**Pagination**

```js
let hasNextPage = false;
let endCursor   = null;
while(!hasNextPage) {
    await fetch("https://[vendor].onshopfront.com/api/v2/graphql", {
        headers: {
            "Content-Type"  : "application/json",
            "Accept"        : "application/json",
            "Authentication": "Bearer [your-bearer-token]",
        },
        body: JSON.stringify({
            query: `
                GetProducts($after: Cursor) {
                    products(after: $after) {
                        edges {
                            node {
                                id,
                                name,
                            }
                        },
                        pageInfo {
                            hasNextPage,
                            endCursor,
                        },
                    }
                }
            `,
            variables: {
                after: endCursor,
            },
        }),
    })
        .then(response => response.json())
        .then(body => {            
            // Do something with the data...
            
            hasNextPage = body.data.pageInfo.hasNextPage;
            endCursor   = body.data.pageInfo.endCursor;
        });
}
```