translations

Use translations only to inspect the store's message catalog. For ordinary text use useTranslation: the engine already loads these files for the page's language and builds the i18n instance from them. Unlike the other modules, this one uses the cdn and filesCdn clients, so it sends none of the store, token or scope headers.

import { useQuery } from '@tanstack/react-query';
import { getTwilightContext } from '@salla.sa/twilight-theme-engine/tanstack';
import { translations } from '@salla.sa/twilight-theme-engine/api/translations';

export function Debug() {
  const { locale } = getTwilightContext();
  const { data } = useQuery(translations.queries.byLocale(locale));
  const keys = Object.keys(data?.[`${locale}.trans`] ?? {});

  return <p>{keys.length} keys</p>;
}

MethodsCopy Anchor Link

TranslationMessages is Record<string, Record<string, string>>, keyed by <locale>.trans, for example 'ar.trans'. get returns one language, so the object has a single key.

forStore is the merchant's own edits to the wording. Most stores have none, so the engine asks for the file only when the language in the store settings has has_custom_translations set.

QueriesCopy Anchor Link

Each language is its own file, so the locale is part of the key. storeId is store.id from the store settings, not the store identifier the client sends in its header.

GotchasCopy Anchor Link

• Fallback. If the platform file for a language is missing, get falls back to the older shared file js/translations.json on https://cdn.salla.network, and returns null if that fails too.
• Errors are swallowed by get. Any failure logs a warning and get returns null. Each wait is 5 seconds.
• forStore is stricter. A 404 means "no overrides" and returns null, but any other failure throws, so the engine does not cache "no overrides" by mistake.
• Your own strings. The store's messages live in the app namespace and your theme's locale files in theme. See Add translation keys.

See alsoCopy Anchor Link

• Languages and RTL
• useTranslation
• store