useFacetsTranslations

Description

The useFacetsTranslations composable provides a reactive and locale-aware system for handling facet (filter) attribute translations in a Nuxt-based search interface. It dynamically fetches and caches translations from a CDN based on the current locale and integrates with a centralized Algolia store. This ensures that search facet labels are presented in the correct language, improving internationalization and user experience.

FEATURE GOALS

• Dynamically load and cache facet translations from a CDN.
• Integrate with the Algolia store to cache results and reduce redundant fetches.
• Watch the current locale and refetch translations on change.
• Provide a utility function to translate facet attributes with graceful fallbacks.

FEATURE EXPECTATIONS

• Automatically fetches translations when the locale changes.
• Uses a shared ref to avoid redundant fetches across multiple component instances.
• Provides a translation fallback logic that formats unknown keys into readable labels.
• Prevents multiple concurrent requests using an isFetching flag.

DEV STRATEGIES

1. Composables Logic

const { getTranslation, fetchTranslations } = useFacetsTranslations();

// Translate a facet attribute
const label = getTranslation("brandName"); // e.g., "Brand Name"

// Manually trigger a fetch (usually auto-handled on locale change)
await fetchTranslations();

• The getTranslation method returns the translated version of a facet key if available.
• If no translation exists, it formats the key into a human-readable label using casing rules.

2. COMPOSABLE STRUCTURE

useFacetsTranslations(): {
  getTranslation: (attribute: string) => string;
  fetchTranslations: () => Promise<void>;
}

3. DEFAULT BEHAVIOR

4. ERROR RESPONSE STRUCTURE

• On failure to fetch translation data, the composable logs an error using a custom handler:

{
  success: false,
  error: "Filter Translation Error - There is an error in the filter translation service or query",
  meta: {
    locality: string,
    filterTranslationError: true
  }
}

• Errors are processed via customClientErrorHandler, allowing for centralized handling and alerting.

FLOW SUMMARY

• The composable watches the current locale and automatically attempts to fetch corresponding facet translations from a CDN.
• It checks the Algolia store cache first before making a network request.
• If successful, it stores the translation both locally and in the global store.
• The getTranslation function provides a formatted fallback for untranslated attributes.
• The logic is shared across all component instances using a singleton-style shared reference (sharedTranslations).