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



Use `category` for a category page or a category menu or tree.

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

export function CategoryList() {
  const { data: categories = [] } = useQuery(category.queries.list());

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

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

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

## Methods [#methods]

| Method        | Parameters   | Returns               | Request               | Login needed |
| ------------- | ------------ | --------------------- | --------------------- | ------------ |
| `find`        | `id: string` | `Promise<Category>`   | `GET categories/{id}` | No           |
| `findOrThrow` | `id: string` | `Promise<Category>`   | Same as `find`        | No           |
| `list`        | none         | `Promise<Category[]>` | `GET categories`      | No           |

## Queries [#queries]

| Query                | Key                                 |
| -------------------- | ----------------------------------- |
| `queries.detail(id)` | `['categories', 'detail', id]`      |
| `queries.list()`     | `['categories', 'list', { scope }]` |

The list key includes the active scope because the branch changes the response. The detail key does not. Neither includes the locale, so if your theme switches language without a page load, add the locale to your own key or invalidate these. See [Authentication and scope](https://docs.salla.dev/twilight/react/api/authentication-and-scope).

## Gotchas [#gotchas]

* `list` returns `[]` when the response has no data.
* `find` throws the client's `HTTPError` for a missing category. `findOrThrow` turns a 404 or 410 into a not-found page and rethrows other errors; see [Errors](https://docs.salla.dev/twilight/react/api/errors-timeouts-and-retries).
* `queries.detail` calls `find`, so a failing `fetchQuery` throws the raw error.

## See also [#see-also]

* [Category route](https://docs.salla.dev/twilight/react/routes/category)
* [brands](https://docs.salla.dev/twilight/react/api/modules/brands) and [product](https://docs.salla.dev/twilight/react/api/modules/product)
* [Loading data](https://docs.salla.dev/twilight/react/guide/loading-data)