Skip to content

Data Fetching with SWR

The React Native Frontend app leverages SWR (stale-while-revalidate) for efficient data fetching, caching, and revalidation. SWR ensures that API requests return fresh data while keeping the UI responsive and minimizing network calls.

Core Concepts & Implementation

1. Global SWR Configuration (StaleWhileRevalidate Component)

This component sets up global defaults for SWR, ensuring consistent behavior across the app.

Key Features:

  • Automatic Revalidation: Revalidates data on app focus and network reconnection.
  • Polling: Uses refreshInterval: 30s to keep data up-to-date.
  • Deduplication: Employs dedupingInterval: 2s to prevent redundant requests.
  • Error Handling & Retry Strategies: Implements robust error handling and retry mechanisms.
  • Network Status: Uses React Native's NetInfo to detect and display online/offline status.
  • In-Memory Caching: Stores cached responses in memory for improved performance.

2. Fetching API Data (useApiCall Hook)

This custom hook provides a standardized wrapper around SWR for making API calls.

Key Features:

  • Configurable Options: Supports options like refreshInterval, revalidateOnFocus, errorRetryCount, etc.
  • Internal Fetcher Function: Handles API requests and errors gracefully.
  • Return Values:
    • data: The latest API response.
    • isLoading: Indicates if the request is in progress.
    • hasError: Flags errors if any occur.
    • refetch(): Allows manual revalidation of the request.

3. Lazy API Calls (useLazyApiCall Hook)

This hook is designed for on-demand API requests, triggered by user actions.

Key Features:

  • useSWRMutation: Executes API calls only when needed.
  • execute Function: Triggers the API request.

4. API Cache Management (useApiCache Hook)

This hook provides direct access to cached API responses.

Key Features:

  • Cache Access: Allows reuse of already-fetched data, preventing unnecessary API calls.

5. Incremental Pagination (usePaginatedApiCall Hook)

Built on useSWRInfinite, this hook powers infinite-scroll lists across the app (Marketplace, Movement History, Orders, Sales, Notifications, cooling-unit and cooling-user management, Dashboard produce lists, and Usage/Revenue analysis).

Key Features:

  • revalidateFirstPage: false: Avoids re-fetching page 1 on every setSize change.
  • Automatic Size Reset: Resets the loaded page count when the request params change, since useSWRInfinite does not do this on its own.
  • Return Values: records, count, isInitialLoading, isLoadingMore, isRefreshing, isFinalPage, loadNextPage(), refresh(), retry().

6. Complete Dataset Loading (fetchAllPages)

A utility (not a hook) that walks every page of a paginated fetcher into a single array. Used for exports, totals/summaries, and reference-data loaders — notably the getAllX methods on ColdtivateService.

Key Features:

  • Progress Reporting: An onPage callback receives each page's results plus a running loadedCount/count, avoiding an O(n²) copy of the accumulated dataset.
  • Cancellation: Accepts an abort signal, consumed by the Usage/Revenue analysis summary-loading path to cancel in-flight page walks when filters change.

Benefits of Using SWR

  • Optimized Performance: Reduces redundant API calls with caching and deduplication.
  • Seamless User Experience: Keeps data fresh while ensuring UI remains responsive.
  • Resilient Error Handling: Automatically retries failed requests with configurable intervals.
  • Offline Support: Detects network changes and gracefully manages data fetching.

This SWR-based data-fetching solution ensures a scalable, efficient, and user-friendly experience across the app.