# store (https://docs.salla.dev/twilight/react/api/modules/store)



Use `store` when you need the settings of the whole storefront: the store profile, theme settings, languages, currencies and external services. In a theme you rarely call it: the engine fetches it first on every page, and [useStore](https://docs.salla.dev/twilight/react/hooks/use-store) and [useTheme](https://docs.salla.dev/twilight/react/hooks/use-theme) read the result.

```tsx title="app/components/StoreName.tsx"
import { useSuspenseQuery } from '@tanstack/react-query';
import { store } from '@salla.sa/twilight-theme-engine/api/store';

export function StoreName() {
  const { data } = useSuspenseQuery(store.queries.settings());
  return <span>{data?.store?.name}</span>;
}
```

## Methods [#methods]

| Method           | Parameters                 | Returns                         | Request                                       | Login needed |
| ---------------- | -------------------------- | ------------------------------- | --------------------------------------------- | ------------ |
| `store.settings` | `storeIdentifier?: string` | `Promise<StoreContext \| null>` | `GET store/settings?include[]=...&scope=<id>` | No           |

`StoreContext` has `store`, `theme`, `languages` (an array), `currencies`, `external_services`, `headers`, `login`, `affiliate`, `policy_url`, `user` (always the guest object; the endpoint ignores the token), and, while the store is closed, `maintenance: true` with `maintenance_details` (the merchant's title and message). While the store has not launched yet, `launched` is `false` (read off `maintenance_details`, which then holds the merchant's "finish launching" notice); otherwise it is absent. See [Is the store in maintenance?](https://docs.salla.dev/twilight/react/data/store#is-the-store-in-maintenance). The request asks for these includes: `store`, `settings`, `theme`, `theme_settings`, `external_services`, `currencies`, `languages`, `payments`, `product_widgets`, `rating`, `ratings`, `user`. The `scope` parameter is added only when a scope is active.

## Queries [#queries]

`store.queries.settings(storeIdentifier?)` has this key:

```ts
['store', 'settings', storeIdentifier, locale, activeScope, requestedThemeVersionId]
```

* The locale and the active scope (the customer's market and branch) are included.
* The theme version is the one the request asked for, so the key is the same on the server and in the browser.
* `storeIdentifier` is whatever you passed, `undefined` by default.

## Gotchas [#gotchas]

* **Errors are swallowed.** Any failure (network, non-2xx, timeout) is logged and the method returns `null`; an empty `data` also gives `null`. It does not throw.
* **No store identifier.** It logs a warning and returns `null` without calling the API.
* **Explicit identifier.** If you pass one, it is sent in the `store-identifier` header, so the store you checked is the store asked. See [Authentication and scope](https://docs.salla.dev/twilight/react/api/authentication-and-scope#the-store).
* **Timeout.** This call waits 5 seconds, not the client's usual 8.
* **Languages.** The API returns languages as an object. The module converts them to an array and adds `iso_code` from `code`.
* **Guests.** No token is required.

## See also [#see-also]

* [useStore](https://docs.salla.dev/twilight/react/hooks/use-store) and [useTheme](https://docs.salla.dev/twilight/react/hooks/use-theme)
* [Settings guide](https://docs.salla.dev/twilight/react/guide/settings)
* [translations](https://docs.salla.dev/twilight/react/api/modules/translations)