Data overview
Which hook or loader gives you the store, theme, product, user and cart objects, and the rules for reading them safely.
Use this page when you know what data you need on screen and want to find the hook that gives it to you, and the page that lists every field.
Where each object comes from
| Object | Where you get it | Page |
|---|---|---|
| Store | useStore() | Store data |
| Theme | useTheme() | Theme data |
| Product | Route loader data, kept live with useProduct() | Product data |
| User | useUser() | User data |
| Cart | The cart API after the SDK gives you the cart id | Cart data |
| Wishlist | useWishlist() (product ids only) | useWishlist |
| Translations and language | useTranslation() | useTranslation |
| Prices as text | useMoney() | Shared types |
| Category, brand, menu, page, breadcrumb, pagination | Route loader data and the API modules | Shared types |
The types are exported from @salla.sa/twilight-theme-engine/types, so you can type your own props:
import type { Product } from '@salla.sa/twilight-theme-engine/types';
export function Title({ product }: { product: Product }) {
return <h1>{product.name}</h1>;
}Three ways data reaches a component
- Hooks such as
useStoreanduseThemeread data the engine loaded at the root of the app. It is there on the server and in the browser. - Route loader data arrives as props or through the route's loader hook (the product page, a category page). See Loading data.
- API modules (
@salla.sa/twilight-theme-engine/api/...) fetch data on demand, usually through React Query. See API modules.
Rules for reading data
Guests and missing data are normal. A customer who is not signed in has no user, so useUser().data is null. Optional fields (a field marked ? in the tables) can be absent, and category, brand or image can come back with empty values. Write product.brand?.name, not product.brand.name.
Money has two shapes. Most prices on a product are plain numbers, but some are objects { amount, currency, formatted? }. Cart lines can be either. Read the number with a small helper and format it with useMoney. Details in Shared types.
Ids differ by object. Products, cart lines and brands use numeric ids, categories also carry a short string id ("QlayPG") next to the number (id_), and cart ids are strings in the cart object but numbers in the API call. Do not compare ids of different objects, and do not assume a type, check it in the table.
Know where it runs. Store, theme and loader data exist in the server HTML. User, cart and wishlist belong to the customer's browser (their token and cart id), so render a guest or empty state first and let the real data fill in. A component that reads them must not break when they are absent.
Next
- Store data, Theme data and Product data describe the objects every page reads.
- User data and Cart data cover the data that depends on the customer.
- Shared types lists the small shapes the others reuse.