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
id
stringRequiredQuery Returned Data
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
Filters and pagination configurations to apply on the retrieved product collections.
Query Returned Data
limit
numberRequiredoffset
numberRequiredcount
numberRequired