category
Fetch one product category or the whole category tree of the store.
Use category for a category page or a category menu or tree.
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>
);
}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
| 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
| 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.
Gotchas
listreturns[]when the response has no data.findthrows the client'sHTTPErrorfor a missing category.findOrThrowturns a 404 or 410 into a not-found page and rethrows other errors; see Errors.queries.detailcallsfind, so a failingfetchQuerythrows the raw error.