product

Use product for anything that shows products: a product page, a listing, a slider, a search.

import { getTwilightContext } from '@salla.sa/twilight-theme-engine/tanstack';
import { product } from '@salla.sa/twilight-theme-engine/api/product';

loader: () => {
  const { queryClient } = getTwilightContext();
  return queryClient.fetchQuery(product.queries.list({ source: 'offers' }));
},

import { useQuery } from '@tanstack/react-query';
import { product } from '@salla.sa/twilight-theme-engine/api/product';

export function CategoryProducts({ categoryId }: { categoryId?: number }) {
  const { data } = useQuery({
    ...product.queries.list({ source: 'categories', sourceValue: [categoryId!] }),
    enabled: categoryId !== undefined,
  });
  const items = data?.items ?? [];

  return <p>{items.length} products</p>;
}

MethodsCopy Anchor Link

ProductsListParams:

The result is { items: Product[]; next: string | null; filters?: Filter[] }. Pass next back as cursor for the following page; it is null on the last page.

QueriesCopy Anchor Link

Both keys include the active scope (the customer's branch) because stock depends on it. Neither includes the locale; see Authentication and scope.

GotchasCopy Anchor Link

• find throws on an unknown id. In a loader use findOrThrow to get a not-found page for a 404 or 410 (other errors still throw).
• For source: 'search' put the words in keyword. Every other source needs sourceValue as ids.
• With source: 'categories', a category_id entry in filters replaces sourceValue.
• Items returned by list are remembered, so queries.detail(id) can show the card data as placeholder while the full details load.
• There are no mutations. Invalidate ['products'] if the customer's branch changes.

See alsoCopy Anchor Link

• wishlist, which reuses the list shape
• Product route and useProduct
• Authentication and scope