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



Use `wishlist` to show the products a customer saved. It reads the same `products` endpoint as [`product`](https://docs.salla.dev/twilight/react/api/modules/product), with `source=wishlist`. Adding and removing products goes through the SDK (see [useWishlist](https://docs.salla.dev/twilight/react/hooks/use-wishlist)).

```tsx title="app/components/WishlistGrid.tsx"
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 [#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 [#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.

```ts title="app/routes/account.wishlist.tsx"
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 [#gotchas]

* Paging is by page number. `list` takes `page`, not a cursor, so request the next page by number.
* A missing `data` becomes `[]`.
* 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).

## See also [#see-also]

* [product](https://docs.salla.dev/twilight/react/api/modules/product)
* [Account wishlist route](https://docs.salla.dev/twilight/react/routes/account-wishlist)
* [useWishlist](https://docs.salla.dev/twilight/react/hooks/use-wishlist)