Shipping Options
Queries and Mutations listed here are used to send requests to the Admin Shipping Option API Routes.
All hooks listed require authentication.
A shipping option is used to define the available shipping methods during checkout or when creating a return. Admins can create an unlimited number of shipping options, each associated with a shipping profile and fulfillment provider, among other resources.
Related Guide: Shipping Option architecture.
Mutations
useAdminCreateShippingOption
This hook creates a shipping option.
Example
import React from "react"
import { useAdminCreateShippingOption } from "medusa-react"
type CreateShippingOption = {
name: string
provider_id: string
data: Record<string, unknown>
price_type: string
amount: number
}
type Props = {
regionId: string
}
const Region = ({ regionId }: Props) => {
const createShippingOption = useAdminCreateShippingOption()
// ...
const handleCreate = (
data: CreateShippingOption
) => {
createShippingOption.mutate({
...data,
region_id: regionId
}, {
onSuccess: ({ shipping_option }) => {
console.log(shipping_option.id)
}
})
}
// ...
}
export default Region
Mutation Function Parameters
The details of the shipping option to create.
Mutation Function Returned Data
The shipping option's details.
useAdminUpdateShippingOption
This hook updates a shipping option's details.
Example
import React from "react"
import { useAdminUpdateShippingOption } from "medusa-react"
type Props = {
shippingOptionId: string
}
const ShippingOption = ({ shippingOptionId }: Props) => {
const updateShippingOption = useAdminUpdateShippingOption(
shippingOptionId
)
// ...
const handleUpdate = (
name: string,
requirements: {
id: string,
type: string,
amount: number
}[]
) => {
updateShippingOption.mutate({
name,
requirements
}, {
onSuccess: ({ shipping_option }) => {
console.log(shipping_option.requirements)
}
})
}
// ...
}
export default ShippingOption
Hook Parameters
id
stringRequiredMutation Function Parameters
The details to update of the shipping option.
Mutation Function Returned Data
The shipping option's details.
useAdminDeleteShippingOption
This hook deletes a shipping option. Once deleted, it can't be used when creating orders or returns.
Example
import React from "react"
import { useAdminDeleteShippingOption } from "medusa-react"
type Props = {
shippingOptionId: string
}
const ShippingOption = ({ shippingOptionId }: Props) => {
const deleteShippingOption = useAdminDeleteShippingOption(
shippingOptionId
)
// ...
const handleDelete = () => {
deleteShippingOption.mutate(void 0, {
onSuccess: ({ id, object, deleted }) => {
console.log(id)
}
})
}
// ...
}
export default ShippingOption
Hook Parameters
id
stringRequiredMutation Function Returned Data
The response returned for a
DELETE
request.
DELETE
request.Queries
useAdminShippingOptions
This hook retrieves a list of shipping options. The shipping options can be filtered by fields such as region_id
or is_return
passed in the query
parameter.
Example
import React from "react"
import { useAdminShippingOptions } from "medusa-react"
const ShippingOptions = () => {
const {
shipping_options,
isLoading
} = useAdminShippingOptions()
return (
<div>
{isLoading && <span>Loading...</span>}
{shipping_options && !shipping_options.length && (
<span>No Shipping Options</span>
)}
{shipping_options && shipping_options.length > 0 && (
<ul>
{shipping_options.map((option) => (
<li key={option.id}>{option.name}</li>
))}
</ul>
)}
</div>
)
}
export default ShippingOptions
Hook Parameters
Filters to apply on the retrieved shipping options.
Query Returned Data
limit
numberRequiredoffset
numberRequiredcount
numberRequiredAn array of shipping options details.
useAdminShippingOption
This hook retrieves a shipping option's details.
Example
import React from "react"
import { useAdminShippingOption } from "medusa-react"
type Props = {
shippingOptionId: string
}
const ShippingOption = ({ shippingOptionId }: Props) => {
const {
shipping_option,
isLoading
} = useAdminShippingOption(
shippingOptionId
)
return (
<div>
{isLoading && <span>Loading...</span>}
{shipping_option && <span>{shipping_option.name}</span>}
</div>
)
}
export default ShippingOption
Hook Parameters
id
stringRequired