My App
Products

Get All Products

Retrieve a list of all available products in your store

Overview

This endpoint returns a complete list of all products available in your store. Use this to display products on your storefront's homepage, catalog pages, or anywhere you need to show multiple products.

Endpoint

GET /v1/products

Authentication

This endpoint requires API key authentication via the x-api-key header.

Request Headers

HeaderTypeRequiredDescription
x-api-keystringYesYour API key for authentication
x-customer-idstringNoCustomer ID (for authenticated users)
x-guest-tokenstringNoGuest token (for unauthenticated users)

The API automatically handles guest sessions. When making requests without authentication, the server returns a guest token in the response headers that should be stored for subsequent requests.

Response

Success Response (200)

Returns an array of product objects.

[
  {
    "id": "prod_123",
    "name": "Premium Wireless Headphones",
    "description": "High-quality wireless headphones with noise cancellation",
    "price": 149.99,
    "category": "Electronics",
    "stock": 50,
    "images": ["https://example.com/image1.jpg"],
    "status": "ACTIVE"
  },
  {
    "id": "prod_456",
    "name": "Smart Watch",
    "description": "Feature-rich smartwatch with health tracking",
    "price": 299.99,
    "category": "Electronics",
    "stock": 30,
    "images": ["https://example.com/image2.jpg"],
    "status": "ACTIVE"
  }
]

Error Responses

Status CodeDescription
401Invalid or missing API key

Code Examples

Next.js Server Action

'use server'

import { cookies } from 'next/headers'

export async function getProducts() {
  const cookieStore = await cookies()
  const guestToken = cookieStore.get('guest_token')?.value
  
  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
    'x-api-key': process.env.BACKEND_API_KEY!,
  }
  
  if (guestToken) {
    headers['x-guest-token'] = guestToken
  }
  
  try {
    const response = await fetch(`${process.env.API_URL}/v1/products`, {
      headers,
      cache: 'no-store'
    })
    
    // Store guest token if returned
    const newGuestToken = response.headers.get('x-guest-token')
    if (newGuestToken) {
      cookieStore.set('guest_token', newGuestToken, {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        sameSite: 'lax',
        maxAge: 60 * 60 * 24 * 90
      })
    }
    
    if (!response.ok) {
      throw new Error('Failed to fetch products')
    }
    
    return await response.json()
  } catch (error) {
    console.error('Error fetching products:', error)
    throw error
  }
}

Client-Side Fetch (Next.js)

import { getProducts } from '@/app/actions/products'

export default async function ProductsPage() {
  const products = await getProducts()
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {products.map((product) => (
        <div key={product.id} className="border rounded-lg p-4">
          <img src={product.images[0]} alt={product.name} />
          <h2 className="text-xl font-semibold">{product.name}</h2>
          <p className="text-gray-600">{product.description}</p>
          <p className="text-lg font-bold">${product.price}</p>
        </div>
      ))}
    </div>
  )
}

React Query (Client Component)

// hooks/useProducts.ts
'use client'

import { useQuery } from '@tanstack/react-query'

export function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: async () => {
      const response = await fetch('/api/products')
      if (!response.ok) throw new Error('Failed to fetch products')
      return response.json()
    }
  })
}

// app/api/products/route.ts
import { NextResponse } from 'next/server'
import { cookies } from 'next/headers'

export async function GET() {
  const cookieStore = await cookies()
  const guestToken = cookieStore.get('guest_token')?.value
  
  const headers: Record<string, string> = {
    'x-api-key': process.env.BACKEND_API_KEY!,
  }
  
  if (guestToken) {
    headers['x-guest-token'] = guestToken
  }
  
  const response = await fetch(`${process.env.API_URL}/v1/products`, {
    headers
  })
  
  const data = await response.json()
  return NextResponse.json(data)
}

Best Practices

Cache Strategy

For product listings that don't change frequently, consider implementing caching:

const response = await fetch(`${process.env.API_URL}/v1/products`, {
  headers,
  next: { revalidate: 3600 } // Revalidate every hour
})

Error Handling

Always implement proper error handling for a better user experience:

try {
  const products = await getProducts()
  // Handle success
} catch (error) {
  // Show error message to user
  console.error('Failed to load products:', error)
}

Loading States

Show loading indicators while fetching data:

const { data: products, isLoading } = useProducts()

if (isLoading) return <ProductsSkeleton />