Pages don't display more than 12 products by default, and can never display more than 50

[jordanarldt]

I've found that when using the Next.js Commerce integration with BigCommerce, the site never displays more than 12 products on any page or category, despite the category/page having more than 12 products assigned to it.

It would be great if this could be fixed natively, or if there was documentation added on how to increase this hard limit set by the integration for users that are planning to set up this integration for production.

[kogan007]

framwork/bigcommerce/api/endpoints/catalog/products/get-products.ts

Add a body parameter called limit Add a search param - if (limit) url.searchParams.set('limit', String(limit))

then in framework/bigcommerce/product/use-search.tsx add the limit parameter to input and that same search param from earlier.

[jordanarldt]

@kogan007 Thanks, the maximum amount for the limit is 50 though since the BigCommerce GraphQL API only supports a maximum amount of 50 items being returned in a single request - so I imagine it would be helpful to other users of this integration if there was a built-in function for recursive product fetching (or pagination) to ensure that every product is displayed.

Although I do understand that this is not supposed to be a "production-ready" boilerplate, I think the functionality of pagination/recursive product fetching is a pretty important factor to have included.

[kogan007]

@kogan007 Thanks, the maximum amount for the limit is 50 though since the BigCommerce GraphQL API only supports a maximum amount of 50 items being returned in a single request - so I imagine it would be helpful to other users of this integration if there was a built-in function for recursive product fetching (or pagination) to ensure that every product is displayed.

Although I do understand that this is not supposed to be a "production-ready" boilerplate, I think the functionality of pagination/recursive product fetching is a pretty important factor to have included.

I did pagination for my project, extremely similar to the limit code snippets I gave you by just adding

if (page && Number.isInteger(Number(page)))
      url.searchParams.set('page', String(page))

Also what I'm doing is passing the "meta" object from the REST api into the final return so that there is info for # of pages and current page.

Personally I would do a request for page 2 for limits higher than 50, in an infinite scrolling type of way.

[jordanarldt]

@kogan007 Thanks, the maximum amount for the limit is 50 though since the BigCommerce GraphQL API only supports a maximum amount of 50 items being returned in a single request - so I imagine it would be helpful to other users of this integration if there was a built-in function for recursive product fetching (or pagination) to ensure that every product is displayed. Although I do understand that this is not supposed to be a "production-ready" boilerplate, I think the functionality of pagination/recursive product fetching is a pretty important factor to have included.

I did pagination for my project, extremely similar to the limit code snippets I gave you by just adding

if (page && Number.isInteger(Number(page)))
      url.searchParams.set('page', String(page))

Also what I'm doing is passing the "meta" object from the REST api into the final return so that there is info for # of pages and current page.

Personally I would do a request for page 2 for limits higher than 50, in an infinite scrolling type of way.

Thanks for the info! It would be nice to see something similar implemented in the base project :-)

[leerob]

Hey there! Thank you for opening this issue. We have decided to take Next.js Commerce in a new direction and will be closing out current PRs and issues due to this change. Please see this PR for more details: https://github.com/vercel/commerce/pull/966