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/productsAuthentication
This endpoint requires API key authentication via the x-api-key header.
Request Headers
| Header | Type | Required | Description |
|---|---|---|---|
x-api-key | string | Yes | Your API key for authentication |
x-customer-id | string | No | Customer ID (for authenticated users) |
x-guest-token | string | No | Guest 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 Code | Description |
|---|---|
401 | Invalid 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 />Related Endpoints
- Get Product by ID - Fetch detailed information about a specific product
- Search Products - Search and filter products