Customers
Queries and Mutations listed here are used to send requests to the Store Customer API Routes.
A customer can register and manage their information such as addresses, orders, payment methods, and more.
Related Guide: How to implement customer profiles in your storefront.
Mutations
useCreateCustomer
This hook registers a new customer. This will also automatically authenticate the customer and set their login session in the response Cookie header. Subsequent requests sent with other hooks are sent with the Cookie session automatically.
Example
import React from "react"
import { useCreateCustomer } from "medusa-react"
const RegisterCustomer = () => {
const createCustomer = useCreateCustomer()
// ...
const handleCreate = (
customerData: {
first_name: string
last_name: string
email: string
password: string
}
) => {
// ...
createCustomer.mutate(customerData, {
onSuccess: ({ customer }) => {
console.log(customer.id)
}
})
}
// ...
}
export default RegisterCustomer
Mutation Function Parameters
The details of the customer to create.
Mutation Function Returned Data
The customer's details.
useUpdateMe
This hook updates the logged-in customer's details. This hook requires customer authentication.
Example
import React from "react"
import { useUpdateMe } from "medusa-react"
type Props = {
customerId: string
}
const Customer = ({ customerId }: Props) => {
const updateCustomer = useUpdateMe()
// ...
const handleUpdate = (
firstName: string
) => {
// ...
updateCustomer.mutate({
id: customerId,
first_name: firstName,
}, {
onSuccess: ({ customer }) => {
console.log(customer.first_name)
}
})
}
// ...
}
export default Customer
Mutation Function Parameters
Mutation Function Returned Data
The customer's details.
Queries
useMeCustomer
This hook retrieves the logged-in customer's details. It requires customer authentication.
Example
import React from "react"
import { useMeCustomer } from "medusa-react"
const Customer = () => {
const { customer, isLoading } = useMeCustomer()
return (
<div>
{isLoading && <span>Loading...</span>}
{customer && (
<span>{customer.first_name} {customer.last_name}</span>
)}
</div>
)
}
export default Customer
Query Returned Data
Customer details.
useCustomerOrders
This hook retrieves a list of the logged-in customer's orders. The orders can be filtered by fields such as status
or fulfillment_status
. The orders can also be paginated.
This hook requires customer authentication.
Example
import React from "react"
import { useCustomerOrders } from "medusa-react"
const Orders = () => {
// refetch a function that can be used to
// re-retrieve orders after the customer logs in
const { orders, isLoading } = useCustomerOrders()
return (
<div>
{isLoading && <span>Loading orders...</span>}
{orders?.length && (
<ul>
{orders.map((order) => (
<li key={order.id}>{order.display_id}</li>
))}
</ul>
)}
</div>
)
}
export default Orders
Hook Parameters
Filters and pagination configurations to apply on the retrieved orders.
Query Returned Data
limit
numberRequiredoffset
numberRequiredcount
numberRequired