brand

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

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>
  );
}

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));
},

MethodsCopy Anchor Link

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.

QueriesCopy Anchor Link

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.

GotchasCopy Anchor Link

• 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 alsoCopy Anchor Link

• Brands route and Brand route
• category and product