Paginating Queries

When working with large sets of data, the number of records within the dataset can create a problem when attempting to query the data through the Storefront SDK 2.X. These problems arise when the number of entries to retrieve is greater than the maximum amount of 500 or the payload size is more than 10 MB. Exceeding these limits results in the query to return an error.

To avoid the 500 entry limit and the 10 MB payload limit, it would be recommended to paginate the queries to reduce the load into separate requests. Doing so will also reduce the overall time needed for data retrieval.

A method to implement pagination for your queries would be to reference the available pageInfo values for hasNextPage and endCursor to determine what to apply to the after filter on the potential next query.

after: cursor value of the entry record to return entries after

hasNextPage: boolean value indicating if there are more entries after the current entry results

endCursor: cursor value of the last entry record from the current entry results

Below would be an example implementation of paginating queries through the Storefront SDK:

import { StorefrontClient } from "@nacelle/storefront-sdk";

export async function getStaticProps() {
    const nacelleV2SDK = new StorefrontClient({
      storefrontEndpoint:
        `https://storefront.api.nacelle.com/graphql/v1/spaces/${spaceId}`,
    });

    const collectionsQuery = `
    query allProductCollections($after: String!) {
        collections: allProductCollections(filter: {after: $after}) {
            pageInfo {
                hasNextPage
                endCursor
            }
            edges {
                node {
                    content {
                        title
                        handle
                    }
                }
            }
        }
    }
    `

    let collections = []
    let hasNextPage = true
    let endCursor = ""
    while (hasNextPage) {
      const { data } = await nacelleV2SDK.query({
        query: collectionsQuery,
        variables: {
          after: endCursor
        }
      })
      
      collections = [...collections, ...data.collections.edges]
      hasNextPage = data.collections.pageInfo.hasNextPage
      endCursor = data.collections.pageInfo.endCursor
    }

    return {
        props: {
            collections
        }
    }
}