Skip to main content
Skip to main content

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

StorePostCustomersReqStorePostCustomersReqRequired
The details of the customer to create.

Mutation Function Returned Data

StoreCustomersResStoreCustomersResRequired
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

UpdateMeReqUpdateMeReqRequired

Mutation Function Returned Data

StoreCustomersResStoreCustomersResRequired
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

customerOmit<Customer, "password_hash">Required
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

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.
ordersOrder[]Required
An array of orders details.
Was this section helpful?