wishlist
List the products the customer saved to their wishlist, using page numbers rather than cursors.
Use wishlist to show the products a customer saved. It reads the same products endpoint as product, with source=wishlist. Adding and removing products goes through the SDK (see useWishlist).
import { useQuery } from '@tanstack/react-query';
import { useUser } from '@salla.sa/twilight-theme-engine/hooks/useUser';
import { wishlist } from '@salla.sa/twilight-theme-engine/api/wishlist';
export function WishlistGrid({ page }: { page: number }) {
const { isLoggedIn } = useUser();
const { data } = useQuery({
...wishlist.queries.list({ page }),
enabled: isLoggedIn,
});
return <p>{data?.items.length ?? 0} saved products</p>;
}Methods
| Method | Parameters | Returns | Request | Login needed |
|---|---|---|---|---|
list | params?: { page?: number; perPage?: number; filterable?: boolean; signal?: AbortSignal } | Promise<{ items, next }> | GET products?source=wishlist&page=1&per_page=15 | Yes |
Defaults: page 1, perPage 15. filterable is sent as 1 or 0 only when you set it.
Queries
| Query | Key |
|---|---|
wishlist.queries.list(params) | ['wishlist', 'list', params, { scope }] |
The key includes the active scope but not the locale. params is required for the query: pass {} for the defaults.
import { wishlist } from '@salla.sa/twilight-theme-engine/api/wishlist';
import { getTwilightContext } from '@salla.sa/twilight-theme-engine/tanstack';
loader: () => {
const { queryClient } = getTwilightContext();
return queryClient.fetchQuery(wishlist.queries.list({ page: 1 }));
},Gotchas
- Paging is by page number.
listtakespage, not a cursor, so request the next page by number. - A missing
databecomes[]. - Guests have no token, so the request fails. Gate with
useUser().isLoggedIn. - After the SDK adds or removes a product, invalidate
['wishlist'](and the product list if it shows hearts).