Get Wishlist

Overview

Retrieve all products saved in the user's wishlist. This endpoint works for both authenticated and guest users, automatically managing wishlist data based on the session type.

Endpoint

GET /v1/wishlist

Authentication

Requires the x-api-key header for authentication.

Request

Headers

Header	Type	Required	Description
`x-api-key`	string	Yes	Your API authentication key

Example Request

async function getWishlist() {
  const response = await fetch('https://api.yourstore.com/v1/wishlist', {
    method: 'GET',
    headers: {
      'x-api-key': process.env.BACKEND_API_KEY,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    throw new Error('Failed to fetch wishlist');
  }

  const guestToken = response.headers.get('x-guest-token');
  if (guestToken) {
    localStorage.setItem('guest_token', guestToken);
  }

  return response.json();
}

interface WishlistItem {
  id: string;
  productId: string;
  product: {
    name: string;
    price: number;
    image: string;
    description: string;
  };
  createdAt: string;
}

async function getWishlist(): Promise<WishlistItem[]> {
  const response = await fetch('https://api.yourstore.com/v1/wishlist', {
    method: 'GET',
    headers: {
      'x-api-key': process.env.BACKEND_API_KEY!,
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    throw new Error('Failed to fetch wishlist');
  }

  const guestToken = response.headers.get('x-guest-token');
  if (guestToken) {
    localStorage.setItem('guest_token', guestToken);
  }

  return response.json();
}

Server-Side Example (Next.js)

import { cookieManager } from '@/lib/auth-tools';

export async function getWishlistItems() {
  const headers = await cookieManager.buildApiHeaders();
  
  const response = await fetch('https://api.yourstore.com/v1/wishlist', {
    method: 'GET',
    headers,
    cache: 'no-store'
  });

  if (!response.ok) {
    throw new Error('Failed to fetch wishlist');
  }

  await cookieManager.handleApiResponse(response);
  return response.json();
}

import { cookieManager } from '@/lib/auth-tools';

interface WishlistItem {
  id: string;
  productId: string;
  product: {
    name: string;
    price: number;
    image: string;
  };
}

export async function getWishlistItems(): Promise<WishlistItem[]> {
  const headers = await cookieManager.buildApiHeaders();
  
  const response = await fetch('https://api.yourstore.com/v1/wishlist', {
    method: 'GET',
    headers,
    cache: 'no-store'
  });

  if (!response.ok) {
    throw new Error('Failed to fetch wishlist');
  }

  await cookieManager.handleApiResponse(response);
  return response.json();
}

Response

Success Response (200)

Returns an array of wishlist items with full product details.

[
  {
    "id": "wish_123",
    "productId": "prod_456",
    "product": {
      "id": "prod_456",
      "name": "Premium Headphones",
      "price": 199.99,
      "image": "https://example.com/images/headphones.jpg",
      "description": "High-quality wireless headphones",
      "inStock": true
    },
    "createdAt": "2024-03-15T10:30:00Z"
  },
  {
    "id": "wish_124",
    "productId": "prod_789",
    "product": {
      "id": "prod_789",
      "name": "Smart Watch",
      "price": 299.99,
      "image": "https://example.com/images/watch.jpg",
      "description": "Feature-rich smartwatch",
      "inStock": false
    },
    "createdAt": "2024-03-14T15:20:00Z"
  }
]

Error Responses

Status Code	Description
`401`	Invalid or missing API key
`422`	Invalid input data
`500`	Failed to get items from wishlist

Important Notes

Guest Token Management: Similar to cart functionality, guest users receive an x-guest-token header for wishlist persistence across sessions.

Wishlist Merging: When a guest user signs in, their guest wishlist will be merged with their authenticated wishlist using the /v1/auth/merge-guest-data endpoint.

Wishlist Page Component

'use client';

import { useEffect, useState } from 'react';
import { getWishlist } from '@/lib/api';

export function WishlistPage() {
  const [wishlist, setWishlist] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadWishlist();
  }, []);

  const loadWishlist = async () => {
    try {
      const items = await getWishlist();
      setWishlist(items);
    } catch (error) {
      console.error('Failed to load wishlist:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div>Loading wishlist...</div>;

  if (wishlist.length === 0) {
    return (
      <div className="text-center py-12">
        <h2>Your wishlist is empty</h2>
        <p>Start adding products you love!</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {wishlist.map(item => (
        <div key={item.id} className="border rounded-lg p-4">
          <img 
            src={item.product.image} 
            alt={item.product.name}
            className="w-full h-48 object-cover rounded"
          />
          <h3 className="mt-4 font-semibold">{item.product.name}</h3>
          <p className="text-gray-600">${item.product.price}</p>
          <div className="mt-4 flex gap-2">
            <button className="flex-1 bg-blue-600 text-white px-4 py-2 rounded">
              Add to Cart
            </button>
            <button className="text-red-600">Remove</button>
          </div>
        </div>
      ))}
    </div>
  );
}

Add to Wishlist - Save products
Remove from Wishlist - Delete items

Get Wishlist

On this page