Product Collections

Queries and Mutations listed here are used to send requests to the Admin Product Collection API Routes.

All hooks listed require authentication.

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.

Mutations

useAdminCreateCollection

This hook creates a product collection.

Example

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

const CreateCollection = () => {
  const createCollection = useAdminCreateCollection()
  // ...

  const handleCreate = (title: string) => {
    createCollection.mutate({
      title
    }, {
      onSuccess: ({ collection }) => {
        console.log(collection.id)
      }
    })
  }

  // ...
}

export default CreateCollection

Mutation Function Parameters

AdminPostCollectionsReqAdminPostCollectionsReqRequired

The product collection's details.

Mutation Function Returned Data

AdminCollectionsResAdminCollectionsResRequired

The collection's details.

useAdminUpdateCollection

This hook updates a product collection's details.

Example

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

type Props = {
  collectionId: string
}

const Collection = ({ collectionId }: Props) => {
  const updateCollection = useAdminUpdateCollection(collectionId)
  // ...

  const handleUpdate = (title: string) => {
    updateCollection.mutate({
      title
    }, {
      onSuccess: ({ collection }) => {
        console.log(collection.id)
      }
    })
  }

  // ...
}

export default Collection

Hook Parameters

idstringRequired

The product collection's ID.

Mutation Function Parameters

AdminPostCollectionsCollectionReqAdminPostCollectionsCollectionReqRequired

The product collection's details to update.

Mutation Function Returned Data

AdminCollectionsResAdminCollectionsResRequired

The collection's details.

useAdminDeleteCollection

This hook deletes a product collection. This does not delete associated products.

Example

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

type Props = {
  collectionId: string
}

const Collection = ({ collectionId }: Props) => {
  const deleteCollection = useAdminDeleteCollection(collectionId)
  // ...

  const handleDelete = (title: string) => {
    deleteCollection.mutate(void 0, {
      onSuccess: ({ id, object, deleted }) => {
        console.log(id)
      }
    })
  }

  // ...
}

export default Collection

Hook Parameters

idstringRequired

The product collection's ID.

Mutation Function Returned Data

DeleteResponseDeleteResponseRequired

The response returned for a DELETE request.

useAdminAddProductsToCollection

This hook adds products to a collection.

Example

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

type Props = {
  collectionId: string
}

const Collection = ({ collectionId }: Props) => {
  const addProducts = useAdminAddProductsToCollection(collectionId)
  // ...

  const handleAddProducts = (productIds: string[]) => {
    addProducts.mutate({
      product_ids: productIds
    }, {
      onSuccess: ({ collection }) => {
        console.log(collection.products)
      }
    })
  }

  // ...
}

export default Collection

Hook Parameters

idstringRequired

The product collection's ID.

Mutation Function Parameters

AdminPostProductsToCollectionReqAdminPostProductsToCollectionReqRequired

The details of the products to add to the collection.

Mutation Function Returned Data

AdminCollectionsResAdminCollectionsResRequired

The collection's details.

useAdminRemoveProductsFromCollection

This hook removes a list of products from a collection. This would not delete the product, only the association between the product and the collection.

Example

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

type Props = {
  collectionId: string
}

const Collection = ({ collectionId }: Props) => {
  const removeProducts = useAdminRemoveProductsFromCollection(collectionId)
  // ...

  const handleRemoveProducts = (productIds: string[]) => {
    removeProducts.mutate({
      product_ids: productIds
    }, {
      onSuccess: ({ id, object, removed_products }) => {
        console.log(removed_products)
      }
    })
  }

  // ...
}

export default Collection

Hook Parameters

idstringRequired

The product collection's ID.

Mutation Function Parameters

AdminDeleteProductsFromCollectionReqAdminDeleteProductsFromCollectionReqRequired

The details of the products to remove from the collection.

Mutation Function Returned Data

AdminDeleteProductsFromCollectionResAdminDeleteProductsFromCollectionResRequired

Deletion operation details

---

Queries

useAdminCollections

This hook retrieves a list of product collections. The product collections can be filtered by fields such as handle or title. The collections can also be sorted or paginated.

Example

To list product collections:

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

const Collections = () => {
  const { collections, isLoading } = useAdminCollections()

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

export default Collections

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 { useAdminCollections } from "medusa-react"

const Collections = () => {
  const { collections, limit, offset, isLoading } = useAdminCollections({
    limit: 15,
    offset: 0
  })

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

export default Collections

Hook Parameters

queryAdminGetCollectionsParams

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 collection details

useAdminCollection

This hook retrieves a product collection by its ID. The products associated with it are expanded and returned as well.

Example

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

type Props = {
  collectionId: string
}

const Collection = ({ collectionId }: Props) => {
  const { collection, isLoading } = useAdminCollection(collectionId)

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

export default Collection

Hook Parameters

idstringRequired

The product collection's ID.

Query Returned Data

collectionProductCollectionRequired

Product Collection details.