# Data overview (https://docs.salla.dev/twilight/react/data)



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 [#where-each-object-comes-from]

| Object                                              | Where you get it                                                       | Page                                       |
| --------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------ |
| Store                                               | [`useStore()`](https://docs.salla.dev/twilight/react/hooks/use-store)                                       | [Store data](https://docs.salla.dev/twilight/react/data/store)                  |
| Theme                                               | [`useTheme()`](https://docs.salla.dev/twilight/react/hooks/use-theme)                                       | [Theme data](https://docs.salla.dev/twilight/react/data/theme)                  |
| Product                                             | Route loader data, kept live with [`useProduct()`](https://docs.salla.dev/twilight/react/hooks/use-product) | [Product data](https://docs.salla.dev/twilight/react/data/product)              |
| User                                                | `useUser()`                                                            | [User data](https://docs.salla.dev/twilight/react/data/user)                    |
| Cart                                                | The [cart API](https://docs.salla.dev/twilight/react/api/modules/cart) after the SDK gives you the cart id  | [Cart data](https://docs.salla.dev/twilight/react/data/cart)                    |
| Wishlist                                            | [`useWishlist()`](https://docs.salla.dev/twilight/react/hooks/use-wishlist) (product ids only)              | [`useWishlist`](https://docs.salla.dev/twilight/react/hooks/use-wishlist)       |
| Translations and language                           | [`useTranslation()`](https://docs.salla.dev/twilight/react/hooks/use-translation)                           | [`useTranslation`](https://docs.salla.dev/twilight/react/hooks/use-translation) |
| Prices as text                                      | [`useMoney()`](https://docs.salla.dev/twilight/react/hooks/use-money)                                       | [Shared types](https://docs.salla.dev/twilight/react/data/shared-types#money)   |
| Category, brand, menu, page, breadcrumb, pagination | Route loader data and the [API modules](https://docs.salla.dev/twilight/react/api/modules)                  | [Shared types](https://docs.salla.dev/twilight/react/data/shared-types)         |

The types are exported from `@salla.sa/twilight-theme-engine/types`, so you can type your own props:

```tsx title="app/components/product/Title.tsx"
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 [#three-ways-data-reaches-a-component]

1. **Hooks** such as `useStore` and `useTheme` read data the engine loaded at the root of the app. It is there on the server and in the browser.
2. **Route loader data** arrives as props or through the route's loader hook (the product page, a category page). See [Loading data](https://docs.salla.dev/twilight/react/guide/loading-data).
3. **API modules** (`@salla.sa/twilight-theme-engine/api/...`) fetch data on demand, usually through React Query. See [API modules](https://docs.salla.dev/twilight/react/api/modules).

## Rules for reading data [#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`](https://docs.salla.dev/twilight/react/hooks/use-money). Details in [Shared types](https://docs.salla.dev/twilight/react/data/shared-types#money).

**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 [#next]

* [Store data](https://docs.salla.dev/twilight/react/data/store), [Theme data](https://docs.salla.dev/twilight/react/data/theme) and [Product data](https://docs.salla.dev/twilight/react/data/product) describe the objects every page reads.
* [User data](https://docs.salla.dev/twilight/react/data/user) and [Cart data](https://docs.salla.dev/twilight/react/data/cart) cover the data that depends on the customer.
* [Shared types](https://docs.salla.dev/twilight/react/data/shared-types) lists the small shapes the others reuse.