Skip to main content

Catalog

The @hv/catalog package exposes a vendor-agnostic interface to vendor-specific catalog integrations.

Integration Function​

The Catalog integration function returns functions for fetching normalized catalog objects. It is intended to be used in server components, server actions or route handlers.

This Function is Server Only

Do not try to instantiate the Catalog() function in client ("use client") components.

Usage​

Example usage:

import { Catalog } from '@hv/catalog';

...

const { getProduct } = Catalog({
  locale: 'en-US',
});

const product = await getProduct({
  handle: 'red-dress'
  variationAttributes: {
    size: 'small'
  }
});

API​

The @hv/catalog package contains an /api folder that exports code to stand-up Next.js Route Handlers.

These endpoints each correspond to a React hook @hv/catalog/client export.

Together these are useful for fetching catalog data in client components.

Endpoints​

/getProduct​

Fetches a product by variantID or handle and variationAttribute values.

Typically you would only call this endpoint by using the useProduct() hook in a client component.

Hooks​

@hv/catalog/client exports React hooks for fetching catalog objects. These correspond to an endpoint above.

useProduct()​

Use product data with client-side fetching with @tanstack/react-query

Reference​

For full documentation on the types exposed by this package, check out the reference section:

Reference