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



Use `home` to learn which sections the merchant placed on the home page, and in what order. Your theme then renders each entry (see [Add a home block](https://docs.salla.dev/twilight/react/recipes/add-a-home-block)).

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

export function HomeSections() {
  const { data: components = [] } = useQuery(home.queries.components());

  return <p>{components.length} sections</p>;
}
```

```ts title="app/routes/index.tsx"
import { home } from '@salla.sa/twilight-theme-engine/api/home';
import { getTwilightContext } from '@salla.sa/twilight-theme-engine/tanstack';

loader: async () => {
  const { queryClient } = getTwilightContext();
  return queryClient.ensureQueryData(home.queries.components());
},
```

## Methods [#methods]

| Method            | Parameters                                                                | Returns                        | Request                                                                                          | Login needed |
| ----------------- | ------------------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------ | ------------ |
| `home.blocks`     | `hook: string`, `scope: { product_id } \| { category_id } \| { page_id }` | `Promise<HomeComponentData[]>` | `GET component/list?hooks={hook}&...`                                                            | No           |
| `home.components` | none                                                                      | `Promise<HomeComponentData[]>` | `GET component/list`, minus the blocks the merchant placed on product, category and custom pages | No           |

## Queries [#queries]

| Query                  | Key                                 |
| ---------------------- | ----------------------------------- |
| `queries.components()` | `['home', 'components', { scope }]` |

The key includes the active scope, because each market has its own home page. It does not include the locale, so add it to your own key if your home page changes language without a reload.

## Gotchas [#gotchas]

* Returns `[]` when the response has no data.
* A failed request throws `HTTPError` or `TimeoutError`.
* `ensureQueryData` returns cached data without refetching, so a loader does not hit the network again until the data is stale or invalidated.

## See also [#see-also]

* [Home route](https://docs.salla.dev/twilight/react/routes/home)
* [Loading data](https://docs.salla.dev/twilight/react/guide/loading-data)