useAjaxEcom

Description

The useAjaxEcom composable is a high-level wrapper around the core useAjax utility, designed specifically to handle AJAX requests to the E-commerce API. It adds support for authentication token management, localization, Redis-based caching, and automatic retry logic for expired or invalid tokens.

This composable ensures that all E-commerce API requests follow consistent patterns with robust error handling and configurable options.

FEATURE GOALS

• Enhance useAjax with E-commerce-specific logic.
• Manage authentication using customer tokens for both guest and logged-in users.
• Automatically attach localization headers (Accept-Language).
• Support Redis caching to reduce redundant API calls.
• Retry requests on token expiration errors (401).
• Expose hooks for loading state, debug logging, and response callbacks.

FEATURE EXPECTATIONS

• Accepts extended options including caching, severity level, debug mode, and custom headers.
• Retrieves access tokens dynamically and appends them to request headers.
• Integrates with Nuxt runtime configuration for environment-specific base URLs.
• Automatically retries the request once if a token refresh is needed.
• Caches successful responses in Redis (when available).
• Gracefully handles and logs error states, updating global store for UI modals.

DEV STRATEGIES

1. Composables Logic

const response = await useAjaxEcom<Product[]>('/products', {
  method: 'get',
  query: { category: 'tools' },
  headers: {},
  cache: true,
  debug: true,
}, (data) => {
  console.log('Fetched products:', data);
});

• Derives final URL from Nuxt config (ecomApiBaseUrl).
• Automatically sets user or guest token if available.
• Appends Accept-Language header based on current locale.
• On success: optionally caches data in Redis and invokes callback.
• On 401 errors: refreshes token and retries (once).
• On failure: updates the root store for UI error handling.

2. COMPOSABLE STRUCTURE

useAjaxEcom<T>(
  url: string,
  options?: {
    params?: object;
    method?: "get" | "post" | "put" | "patch" | "delete";
    query?: object;
    headers?: object;
    show_notifications?: boolean;
    show_loading_indicator?: boolean;
    severity?: string;
    debug?: boolean;
    cache?: boolean;
  },
  callback?: Function,
  retries?: number // default: 4
): Promise<T | AjaxErrorResponse>

3. DEFAULT BEHAVIOR

4. ERROR RESPONSE STRUCTURE

• If the request fails, the returned response has this structure:

{
  success: false,
  errors: string[],
}

• Triggers a modal via root store to inform the user.
• Handles known status codes (401, 403, 404, 422) gracefully.
• On token expiration (401.), refreshes token and retries request (once).
• CORS or unknown errors populate the error state in rootStore.

5. CACHE STRATEGY

• If cache: true is enabled:
  • Generates a cache key based on URL and query/params.
  • Checks Redis for cached data before making a request.
  • On successful request, saves data in Redis for 1 hour.

FLOW SUMMARY

• Accepts API endpoint, request config, and an optional callback.
• Determines if data is cacheable and fetches from Redis if available.
• Appends tokens and headers dynamically.
• Sends the request via useAjax.
• If failed due to expired token, refreshes and retries.
• Updates UI modals and logs based on failure type.
• On success, caches result (if enabled) and returns data.