Pagination example

Implementing pagination using offset and limit, with keepPreviousData to prevent showing a loader.

1. Pagination Parameters: Use offset and limit to fetch specific subsets of data.
2. Query Key: Include offset in the query key to differentiate between different pages of data.
3. keepPreviousData: Use the keepPreviousData option to retain the previous data while fetching new data, avoiding a loading state.
4. Controlled Fetching: Dynamically adjust offset and limit based on user interaction (e.g., clicking "Next" or "Previous" buttons).

Note: The total number of pages is hard coded as API response does not provide total count.

When to use

1. Large Data Sets: Ideal for applications that need to display large data sets in manageable chunks.
2. Smooth Navigation: Use to provide a smooth user experience by prefetching data and avoiding loading indicators.
3. User Navigation: Suitable for scenarios where users need to navigate through data pages efficiently without interruptions.

Full code for this example: Click here

Products list