Line Items

Mutations listed here are used to send requests to the Line Item API Routes part of the Store Cart API Routes.

The hooks listed have general examples on how to use them, but it's highly recommended to use the CartProvider provider and the useCart hook to manage your cart and access the current cart across your application.

Mutations

useCreateLineItem

This hook generates a Line Item with a given Product Variant and adds it to the Cart.

Example

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

type Props = {
  cartId: string
}

const Cart = ({ cartId }: Props) => {
  const createLineItem = useCreateLineItem(cartId)

  const handleAddItem = (
    variantId: string,
    quantity: number
  ) => {
    createLineItem.mutate({
      variant_id: variantId,
      quantity,
    }, {
      onSuccess: ({ cart }) => {
        console.log(cart.items)
      }
    })
  }

  // ...
}

export default Cart

Hook Parameters

cartIdstringRequired

The cart's ID.

Mutation Function Parameters

StorePostCartsCartLineItemsReqStorePostCartsCartLineItemsReqRequired

The details of the line item to create.

Mutation Function Returned Data

StoreCartsResStoreCartsResRequired

The cart's details.

useUpdateLineItem

This hook updates a line item's data.

Example

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

type Props = {
  cartId: string
}

const Cart = ({ cartId }: Props) => {
  const updateLineItem = useUpdateLineItem(cartId)

  const handleUpdateItem = (
    lineItemId: string,
    quantity: number
  ) => {
    updateLineItem.mutate({
      lineId: lineItemId,
      quantity,
    }, {
      onSuccess: ({ cart }) => {
        console.log(cart.items)
      }
    })
  }

  // ...
}

export default Cart

Hook Parameters

cartIdstringRequired

The cart's ID.

Mutation Function Parameters

UpdateLineItemReqUpdateLineItemReqRequired

Mutation Function Returned Data

StoreCartsResStoreCartsResRequired

The cart's details.

useDeleteLineItem

This hook deletes a line item from a cart. The payment sessions will be updated and the totals will be recalculated.

Example

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

type Props = {
  cartId: string
}

const Cart = ({ cartId }: Props) => {
  const deleteLineItem = useDeleteLineItem(cartId)

  const handleDeleteItem = (
    lineItemId: string
  ) => {
    deleteLineItem.mutate({
      lineId: lineItemId,
    }, {
      onSuccess: ({ cart }) => {
        console.log(cart.items)
      }
    })
  }

  // ...
}

export default Cart

Hook Parameters

cartIdstringRequired

The cart's ID.

Mutation Function Parameters

lineIdstringRequired

The line item's ID.

Mutation Function Returned Data

StoreCartsResStoreCartsResRequired

The cart's details.