Laravel React Sample App - API client update for pagination

Paginating data helps you manage user interactions or handle batch information when fetching data from the BigCommerce APIs. With this update, you can focus on building your React components while the API client handles the complexity of pagination and API interactions.

Our Laravel React Sample app now includes examples for two use cases of pagination:

  • Managing UI interactions in a paginated inventory table with interactive controls

  • Retrieving large datasets for inventory reports and CSV exports

The following article explores how the API client handles pagination. We have updated the client-side portion of the API client to either handle or pass pagination data through its service layers, depending on the use case.

The figure below outlines the overall structure of the sample app and highlights the client-side portion that we updated in the example implementation.

Laravel React App Architecture

Figure 1: App structure. The API client that makes it easier to work with the BigCommerce API has a split architecture.

API client update - Javascript service layers

Our updates to the API client allow you to handle pagination in the React component for user interaction or in the service layer for bulk operations.

Component Layer Pagination

Pagination in the component layer refers to handling and displaying paginated data within the React component (i.e. UI-driven pagination). 

Component layer pagination is useful for:

  • User navigation

  • Page controls

  • Visual feedback

  • UI state management

For component layer pagination, you can use ApiService, which uses the following approach:

  • Accepts page and limit parameters

  • Returns pagination metadata to the React component with each response

  • Lets the React component handle page navigation

Overall, ApiService fetches small subsets of data at a time, allowing users to navigate through the data set using pagination controls.

Service Layer Pagination

Service layer pagination refers to handling pagination entirely within the service layer, where the service iterates through all available pages of data automatically, making sequential API requests until all pages are retrieved. 

Service layer pagination is useful for:

  • Batch processing

  • Report generation

  • Data exports

  • Large dataset operations

For scenarios requiring complete data retrieval, you can use BatchApiService which automates pagination with the following approach:

  • Fetches multiple pages of data automatically, using pagination data to reduce server load

  • Handles rate limits between requests

  • Concatenates all results into a single response to return to the React Component

Overall, BatchApiService abstracts pagination complexity away from React components, rather than having them manage page numbers, limits, or multiple API calls themselves.

Both service layers include built-in protection for rate limits via throttling, which helps prevent API rate limit errors by introducing automatic delays.

The figure below summarizes the similarities and differences between the two service layers:

FEATURE

API SERVICE

BATCH API SERVICE

Similarities

Client-side service layers in the API client

--

--

Create consistent interfaces for UI components to make API calls

--

--

Differences

Use Case

Component layer pagination for user interactions, single-page fetching

Service layer pagination for batch operations

Collaboration with UI Component

Works interactively, with the UI requesting specific pages as needed

Works independently to fetch all pages at once

Data flow

UI request -> ApiService -> single API call -> UI update -> user interaction -> repeat

Single request -> multiple API calls -> complete dataset -> final UI update

Memory management

Only holds one page of data at a time

Accumulates all data before returning

User experience

Shows data immediately with interactive pagination

Shows loading state until all data is retrieved

Example Implementation

Component Layer Pagination 

Inventory.jsx displays a paginated table of inventory items, allowing users to browse through the data with interactive page controls. The collaboration between Inventory.jsx and ApiService.js creates a memory-efficient interface for browsing large datasets.

1. Inventory.jsx uses ApiService.js to fetch a single page of 5 inventories at a time 2. Inventory.jsx uses the pagination data that ApiService.js returns for UI interactions.

Service Layer Pagination 

Reports.jsx provides a user interface to export the complete inventory dataset as a CSV file. The collaboration between Reports.jsx and BatchApiService.js creates a seamless interface for bulk operations like CSV exports and report generation.

  1. Reports.jsx uses BatchApiService.js to fetch all inventories in one operation

  2. Reports.jsx uses the complete dataset that BatchApiService.js returns for generating CSV exports

Get started today!

Ready to dive into the Laravel React Sample app? Check out the example implementation from this blog and kickstart your project today! Reach out to devrel@bigcommerce.com if you have questions or feedback.