Product Collections

Queries listed here are used to send requests to the Store Product Collection API Routes.

A product collection is used to organize products for different purposes such as marketing or discount purposes. For example, you can create a Summer Collection. Using the methods in this class, you can list or retrieve a collection's details and products.

Queries

useCollection

This hook retrieves a product collection's details.

Example

import React from "react"
import { useCollection } from "medusa-react"

type Props = {
  collectionId: string
}

const ProductCollection = ({ collectionId }: Props) => {
  const { collection, isLoading } = useCollection(collectionId)

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {collection && <span>{collection.title}</span>}
    </div>
  )
}

export default ProductCollection

Hook Parameters

idstringRequired

The product collection's ID.

Query Returned Data

collectionProductCollectionRequired

Product collection details.

useCollections

This hook retrieves a list of product collections. The product collections can be filtered by fields such as handle or created_at passed in the query parameter. The product collections can also be paginated.

Example

To list product collections:

import React from "react"
import { useCollections } from "medusa-react"

const ProductCollections = () => {
  const { collections, isLoading } = useCollections()

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {collections && collections.length === 0 && (
        <span>No Product Collections</span>
      )}
      {collections && collections.length > 0 && (
        <ul>
          {collections.map((collection) => (
            <li key={collection.id}>{collection.title}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default ProductCollections

By default, only the first 10 records are retrieved. You can control pagination by specifying the limit and offset properties:

import React from "react"
import { useCollections } from "medusa-react"

const ProductCollections = () => {
  const { 
    collections, 
    limit,
    offset,
    isLoading
  } = useCollections({
    limit: 20,
    offset: 0
  })

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {collections && collections.length === 0 && (
        <span>No Product Collections</span>
      )}
      {collections && collections.length > 0 && (
        <ul>
          {collections.map((collection) => (
            <li key={collection.id}>{collection.title}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default ProductCollections

Hook Parameters

queryStoreGetCollectionsParams

Filters and pagination configurations to apply on the retrieved product collections.

Query Returned Data

limitnumberRequired

The maximum number of items that can be returned in the list.

offsetnumberRequired

The number of items skipped before the returned items in the list.

countnumberRequired

The total number of items available.

collectionsProductCollection[]Required

An array of product collections details