Types / Cursor — Shopfront Developer Documentation

Scalar

Cursor

Cursors are used to deal with multiple pages of results in GraphQL. We would highly suggest reading the GraphQL learning information on pagination.

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 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.

Pagination

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;
        });
}