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



Use `brand` for a brands directory or a brand page. The file is `api/brands`, but the exported object is named `brand`.

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

export function BrandsStrip() {
  const { data } = useQuery(brand.queries.list());
  const brands = data?.items ?? [];

  return (
    <ul>
      {brands.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}
```

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

loader: ({ params }) => {
  const { queryClient } = getTwilightContext();
  return queryClient.fetchQuery(brand.queries.detail(params.id));
},
```

## Methods [#methods]

| Method              | Parameters      | Returns                                             | Request                                                      | Login needed |
| ------------------- | --------------- | --------------------------------------------------- | ------------------------------------------------------------ | ------------ |
| `brand.list`        | `page?: number` | `Promise<{ items: Brand[]; next: string \| null }>` | `GET brands` (`GET brands?page={page}` when you pass a page) | No           |
| `brand.find`        | `id: string`    | `Promise<Brand>`                                    | `GET brands/{id}`                                            | No           |
| `brand.findOrThrow` | `id: string`    | `Promise<Brand>`                                    | Same as `find`                                               | No           |

A `Brand` has `id`, `url`, `name`, `label`, `description`, `logo`, `status`, `ar_char`, `en_char` and optional `banner`, `channels` and `metadata`.

Paging is by page number: `list(2)` asks for page 2. `next` is the API's cursor for the following page, or `null`; `list` itself only takes a page number, so count pages yourself.

## Queries [#queries]

| Query                 | Key                             |
| --------------------- | ------------------------------- |
| `queries.list(page?)` | `['brands', 'list', page ?? 1]` |
| `queries.detail(id)`  | `['brands', 'detail', id]`      |

Neither key includes the locale or the active scope. If your theme changes language without a reload, add the locale to your own key or invalidate these.

## Gotchas [#gotchas]

* `list` returns `items: []` when the response has no data.
* `find` throws `HTTPError` on failure. `findOrThrow` turns a 404 or 410 into a not-found page and rethrows other errors.
* `queries.detail` uses `find`, so a failure throws the raw error.

## See also [#see-also]

* [Brands route](https://docs.salla.dev/twilight/react/routes/brands) and [Brand route](https://docs.salla.dev/twilight/react/routes/brand)
* [category](https://docs.salla.dev/twilight/react/api/modules/category) and [product](https://docs.salla.dev/twilight/react/api/modules/product)